Paleta de cores Mango Burn
Mango Burn é uma paleta de 5 cores baseada em vermelhos, rosas e neutros. Em OKLCH, a luminosidade vai de 23% (#38021D, muito escuro) a 95% (#FFE9F3, muito claro), e a cor mais saturada, #BA5084, é vívida. 4 das suas 4 cores cromáticas ficam no lado quente do círculo cromático. 4 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, rosas e para daltonismo.
Pôr do solQuentesMonocromáticasGradienteRosasPara daltonismo
- Jet #38021D
- Maroon #72254A
- Paradise Pink #BA5084
- Cherry Blossom Pink #F29DC6
- Anti-Flash White #FFE9F3
Códigos de cor
| Cor | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #38021D | rgb(56, 2, 29) | hsl(330, 93%, 11%) | oklch(22.5% 0.088 356) |
| Maroon | #72254A | rgb(114, 37, 74) | hsl(331, 51%, 30%) | oklch(39.3% 0.115 354) |
| Paradise Pink | #BA5084 | rgb(186, 80, 132) | hsl(331, 43%, 52%) | oklch(58.2% 0.148 352.1) |
| Cherry Blossom Pink | #F29DC6 | rgb(242, 157, 198) | hsl(331, 77%, 78%) | oklch(79.2% 0.113 349.6) |
| Anti-Flash White | #FFE9F3 | rgb(255, 233, 243) | hsl(333, 100%, 96%) | oklch(95.4% 0.027 348.3) |
Acessibilidade
Os melhores pares de texto e fundo de Mango Burn, 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 |
|---|---|---|---|
| #FFE9F3 sobre #38021D | 15.24:1 | AAA | Lc -95.3 |
| #FFE9F3 sobre #72254A | 8.76:1 | AAA | Lc -86.2 |
| #38021D sobre #F29DC6 | 8.72:1 | AAA | Lc 62.5 |
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/38021d-72254a-ba5084-f29dc6-ffe9f3.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.