Paleta de cores Lilac Terrace
Lilac Terrace é uma paleta de 5 cores baseada em roxos, vermelhos e laranjas. Em OKLCH, a luminosidade vai de 20% (#190E32, muito escuro) a 92% (#FBE0B8, muito claro), e a cor mais saturada, #F08A8B, é moderadamente saturada. 2 das suas 5 cores cromáticas ficam no lado quente do círculo cromático. 5 dos seus 10 pares de cores atingem a razão AA da WCAG de 4.5:1 para texto corrido. Está marcada como pôr do sol, roxas e para daltonismo.
- Rich Black #190E32
- Prussian Blue #3D2B6B
- Dusty Grape #76538A
- Sweet Salmon #F08A8B
- Lemon Meringue #FBE0B8
Códigos de cor
| Cor | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Black | #190E32 | rgb(25, 14, 50) | hsl(258, 56%, 13%) | oklch(20.3% 0.068 293.5) |
| Prussian Blue | #3D2B6B | rgb(61, 43, 107) | hsl(257, 43%, 29%) | oklch(34.6% 0.107 292.9) |
| Dusty Grape | #76538A | rgb(118, 83, 138) | hsl(278, 25%, 43%) | oklch(50.2% 0.094 312.5) |
| Sweet Salmon | #F08A8B | rgb(240, 138, 139) | hsl(359, 77%, 74%) | oklch(74.3% 0.125 19.9) |
| Lemon Meringue | #FBE0B8 | rgb(251, 224, 184) | hsl(36, 89%, 85%) | oklch(91.9% 0.06 77.6) |
Acessibilidade
Os melhores pares de texto e fundo de Lilac Terrace, pela razão de contraste WCAG 2, com o contraste de luminosidade APCA (Lc) do texto sobre o fundo.
| Par | WCAG 2 | Nível | APCA Lc |
|---|---|---|---|
| #FBE0B8 sobre #190E32 | 14.31:1 | AAA | Lc -89.2 |
| #FBE0B8 sobre #3D2B6B | 9.37:1 | AAA | Lc -83.0 |
| #190E32 sobre #F08A8B | 7.58:1 | AAA | Lc 55.6 |
Visão de cores
Nenhum par de cores fica a menos de ΔE 0.06 de outro sob protanopia, deuteranopia, tritanopia ou acromatopsia. Ela está marcada como segura para daltonismo: todos os pares ficam a pelo menos ΔE 0.14.
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
Use no seu código
Instale estas cores como cores de tema do Tailwind CSS v4 com o shadcn: npx shadcn@latest add https://getcolors.so/r/palette/190e32-3d2b6b-76538a-f08a8b-fbe0b8.json.
Faça dela a sua
Edite as cores, crie com elas um sistema de cores completo nos modos claro e escuro ou veja tudo em uma interface real.