Variáveis CSS
:root {
--c-vibrant-1: #2C0054;
--c-vibrant-2: #5B327D;
--c-vibrant-3: #04517D;
--c-vibrant-4: #388CDD;
--c-vibrant-5: #38E46D;
--c-vibrant-6: #389F51;
--c-vibrant-7: #FFFF8C;
--c-vibrant-8: #FFB82C;
--c-vibrant-9: #FF546A;
--c-vibrant-10: #BE166A;
}
Sobre esta paleta
Esta paleta vibrante de 10 cores vai de Cinque Foil (#FFFF8C), o tom mais claro, até Hollow Knight (#2C0054), o mais escuro. Ela reúne Hollow Knight, Foggy Amethyst, China Seas, Bleu de France, Acid Pops, Formal Garden, Cinque Foil, Extreme Yellow, Festive Fennec e Spiced Purple em um único conjunto que você pode levar direto para uma interface. Dos seus 45 pares de cores, 13 atingem o limiar de contraste WCAG AA (4,5:1) para texto corrido — o mais forte é #2C0054 sobre #FFFF8C, com 16,14:1.
Uma paleta versátil para páginas de marketing, blocos hero de produtos, ilustrações e estados de destaque na interface.
Análise das cores
Contraste e acessibilidade
13 de 45 pares de cores atingem o limiar de contraste WCAG AA (4,5:1) para texto corrido.