Paleta de cores Persimmon and Paprika
Persimmon and Paprika é uma paleta de 5 cores baseada em roxos e neutros. Em OKLCH, a luminosidade vai de 19% (#180F20, muito escuro) a 95% (#F0EAFF, muito claro), e a cor mais saturada, #84739B, é apagada. As cores têm croma baixo demais para pender para o quente ou para o frio. 3 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, quentes, monocromáticas, gradiente, roxas e para daltonismo.
Pôr do solQuentesMonocromáticasGradienteRoxasPara daltonismo
- Rich Black #180F20
- Dim Gray #4C3F5B
- Lavender Gray #84739B
- French Gray #B7ABCD
- Gainsboro #F0EAFF
Códigos de cor
| Cor | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Black | #180F20 | rgb(24, 15, 32) | hsl(272, 36%, 9%) | oklch(18.9% 0.036 307.6) |
| Dim Gray | #4C3F5B | rgb(76, 63, 91) | hsl(268, 18%, 30%) | oklch(39.3% 0.049 305.5) |
| Lavender Gray | #84739B | rgb(132, 115, 155) | hsl(266, 17%, 53%) | oklch(58.6% 0.063 303.9) |
| French Gray | #B7ABCD | rgb(183, 171, 205) | hsl(261, 25%, 74%) | oklch(76.2% 0.05 301.3) |
| Gainsboro | #F0EAFF | rgb(240, 234, 255) | hsl(257, 100%, 96%) | oklch(94.8% 0.029 298.9) |
Acessibilidade
Os melhores pares de texto e fundo de Persimmon and Paprika, 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 |
|---|---|---|---|
| #F0EAFF sobre #180F20 | 15.88:1 | AAA | Lc -95.4 |
| #180F20 sobre #B7ABCD | 8.62:1 | AAA | Lc 60.6 |
| #F0EAFF sobre #4C3F5B | 8.26:1 | AAA | Lc -84.8 |
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/180f20-4c3f5b-84739b-b7abcd-f0eaff.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.