Paleta de cores Bubble Storybook
Bubble Storybook é uma paleta de 5 cores baseada em roxos e azuis. Em OKLCH, a luminosidade vai de 30% (#36204F, escuro) a 94% (#D7EDFF, muito claro), e a cor mais saturada, #7481B8, é moderadamente saturada. 4 das suas 5 cores cromáticas ficam no lado frio do círculo cromático. 3 dos seus 10 pares de cores atingem a razão AA da WCAG de 4.5:1 para texto corrido. Está marcada como infantis, gradiente, azuis, roxas, frias e para daltonismo.
- Space Cadet #36204F
- Dusty Grape #554F83
- Lavender Gray #7481B8
- Light Cornflower Blue #95B8EC
- Gainsboro #D7EDFF
Códigos de cor
| Cor | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Space Cadet | #36204F | rgb(54, 32, 79) | hsl(268, 42%, 22%) | oklch(29.7% 0.084 303.2) |
| Dusty Grape | #554F83 | rgb(85, 79, 131) | hsl(247, 25%, 41%) | oklch(45.7% 0.084 287.9) |
| Lavender Gray | #7481B8 | rgb(116, 129, 184) | hsl(229, 32%, 59%) | oklch(61.5% 0.085 273.5) |
| Light Cornflower Blue | #95B8EC | rgb(149, 184, 236) | hsl(216, 70%, 75%) | oklch(77.6% 0.084 258.1) |
| Gainsboro | #D7EDFF | rgb(215, 237, 255) | hsl(207, 100%, 92%) | oklch(93.5% 0.034 242.7) |
Acessibilidade
Os melhores pares de texto e fundo de Bubble Storybook, 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 |
|---|---|---|---|
| #D7EDFF sobre #36204F | 11.82:1 | AAA | Lc -90.0 |
| #36204F sobre #95B8EC | 7.01:1 | AAA | Lc 59.2 |
| #D7EDFF sobre #554F83 | 6.16:1 | AA | Lc -76.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/36204f-554f83-7481b8-95b8ec-d7edff.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.