Registrarse Registrarse
Fade12

Fade12

Paleta de 12 colores · Colores cálidos · Tonos mixtos · Armonía complementaria

Volver a la biblioteca

Fade12

Paleta de 12 colores · Colores cálidos · Tonos mixtos · Armonía complementaria

Editar
Colores vibrantes 12 colores Colores cálidos Tonos mixtos Armonía complementaria 12colors
Me gusta 9
Colores 12

Variables CSS

:root {
  --c-vibrant-1: #FE5F55;
  --c-vibrant-2: #F5D549;
  --c-vibrant-3: #5ABD5C;
  --c-vibrant-4: #423A60;
  --c-vibrant-5: #9C579E;
  --c-vibrant-6: #E986C6;
  --c-vibrant-7: #FFDCA8;
  --c-vibrant-8: #C1FFA8;
  --c-vibrant-9: #A8D9FF;
  --c-vibrant-10: #000019;
  --c-vibrant-11: #828282;
  --c-vibrant-12: #F0FFFE;
}

Sobre esta paleta

Esta paleta de 12 colores vibrantes va de Vapour (#F0FFFE), su tono más claro, a Benthic Black (#000019), el más oscuro. Combina Sunset Orange, Anna Banana, Forest Maid, Patriot Blue, Heath Spotted Orchid, Blushed Bombshell, Sarcoline, Menthol, Malmö FF, Benthic Black, Squant y Vapour en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 15 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #000019 sobre #F0FFFE, con 20,16:1.

Una paleta versátil para páginas de marketing, bloques hero de producto, ilustraciones y estados de acento de la interfaz.

Desglose de colores

Sunset Orange #FE5F55
RGB
rgb(254, 95, 85)
HSL
hsl(4, 99%, 66%)
Luminancia
0,299
Anna Banana #F5D549
RGB
rgb(245, 213, 73)
HSL
hsl(49, 90%, 62%)
Luminancia
0,675
Forest Maid #5ABD5C
RGB
rgb(90, 189, 92)
HSL
hsl(121, 43%, 55%)
Luminancia
0,393
Patriot Blue #423A60
RGB
rgb(66, 58, 96)
HSL
hsl(253, 25%, 30%)
Luminancia
0,050
Heath Spotted Orchid #9C579E
RGB
rgb(156, 87, 158)
HSL
hsl(298, 29%, 48%)
Luminancia
0,164
Blushed Bombshell #E986C6
RGB
rgb(233, 134, 198)
HSL
hsl(321, 69%, 72%)
Luminancia
0,385
Sarcoline #FFDCA8
RGB
rgb(255, 220, 168)
HSL
hsl(36, 100%, 83%)
Luminancia
0,753
Menthol #C1FFA8
RGB
rgb(193, 255, 168)
HSL
hsl(103, 100%, 83%)
Luminancia
0,857
Malmö FF #A8D9FF
RGB
rgb(168, 217, 255)
HSL
hsl(206, 100%, 83%)
Luminancia
0,652
Benthic Black #000019
RGB
rgb(0, 0, 25)
HSL
hsl(240, 100%, 5%)
Luminancia
0,001
Squant #828282
RGB
rgb(130, 130, 130)
HSL
hsl(0, 0%, 51%)
Luminancia
0,223
Vapour #F0FFFE
RGB
rgb(240, 255, 254)
HSL
hsl(176, 100%, 97%)
Luminancia
0,972

Contraste y accesibilidad

Combinaciones de colores en la paleta: 66. De ellas, 15 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal.

Aa #000019 sobre #F0FFFE 20,16:1 AAA
Aa #C1FFA8 sobre #000019 17,89:1 AAA
Aa #FFDCA8 sobre #000019 15,83:1 AAA
Aa #F5D549 sobre #000019 14,30:1 AAA
Aa #A8D9FF sobre #000019 13,84:1 AAA
Aa #423A60 sobre #F0FFFE 10,19:1 AAA
Aa #423A60 sobre #C1FFA8 9,04:1 AAA
Aa #5ABD5C sobre #000019 8,75:1 AAA
Aa #E986C6 sobre #000019 8,57:1 AAA
Aa #423A60 sobre #FFDCA8 8,00:1 AAA
Aa #F5D549 sobre #423A60 7,23:1 AAA
Aa #423A60 sobre #A8D9FF 7,00:1 AAA
Aa #FE5F55 sobre #000019 6,89:1 AA
Aa #000019 sobre #828282 5,39:1 AA
Aa #9C579E sobre #F0FFFE 4,79:1 AA
Aa #5ABD5C sobre #423A60 4,42:1 AA, texto grande
Aa #423A60 sobre #E986C6 4,33:1 AA, texto grande
Aa #9C579E sobre #C1FFA8 4,25:1 AA, texto grande
Aa #9C579E sobre #000019 4,21:1 AA, texto grande
Aa #9C579E sobre #FFDCA8 3,76:1 AA, texto grande
Aa #828282 sobre #F0FFFE 3,74:1 AA, texto grande
Aa #FE5F55 sobre #423A60 3,48:1 AA, texto grande
Aa #F5D549 sobre #9C579E 3,39:1 AA, texto grande
Aa #C1FFA8 sobre #828282 3,32:1 AA, texto grande
Aa #9C579E sobre #A8D9FF 3,29:1 AA, texto grande
Aa #FFDCA8 sobre #828282 2,94:1 No aprobado
Aa #FE5F55 sobre #F0FFFE 2,93:1 No aprobado
Aa #423A60 sobre #828282 2,72:1 No aprobado
Aa #F5D549 sobre #828282 2,65:1 No aprobado
Aa #FE5F55 sobre #C1FFA8 2,60:1 No aprobado
Aa #A8D9FF sobre #828282 2,57:1 No aprobado
Aa #E986C6 sobre #F0FFFE 2,35:1 No aprobado
Aa #FE5F55 sobre #FFDCA8 2,30:1 No aprobado
Aa #5ABD5C sobre #F0FFFE 2,30:1 No aprobado
Aa #423A60 sobre #9C579E 2,13:1 No aprobado
Aa #E986C6 sobre #C1FFA8 2,09:1 No aprobado
Aa #FE5F55 sobre #F5D549 2,08:1 No aprobado
Aa #5ABD5C sobre #9C579E 2,08:1 No aprobado
Aa #5ABD5C sobre #C1FFA8 2,05:1 No aprobado
Aa #9C579E sobre #E986C6 2,03:1 No aprobado
Aa #FE5F55 sobre #A8D9FF 2,01:1 No aprobado
Aa #423A60 sobre #000019 1,98:1 No aprobado
Aa #E986C6 sobre #FFDCA8 1,85:1 No aprobado
Aa #5ABD5C sobre #FFDCA8 1,81:1 No aprobado
Aa #F5D549 sobre #E986C6 1,67:1 No aprobado
Aa #FE5F55 sobre #9C579E 1,63:1 No aprobado
Aa #F5D549 sobre #5ABD5C 1,63:1 No aprobado
Aa #5ABD5C sobre #828282 1,62:1 No aprobado
Aa #E986C6 sobre #A8D9FF 1,61:1 No aprobado
Aa #E986C6 sobre #828282 1,59:1 No aprobado
Aa #5ABD5C sobre #A8D9FF 1,58:1 No aprobado
Aa #A8D9FF sobre #F0FFFE 1,46:1 No aprobado
Aa #F5D549 sobre #F0FFFE 1,41:1 No aprobado
Aa #C1FFA8 sobre #A8D9FF 1,29:1 No aprobado
Aa #FE5F55 sobre #828282 1,28:1 No aprobado
Aa #9C579E sobre #828282 1,28:1 No aprobado
Aa #FE5F55 sobre #5ABD5C 1,27:1 No aprobado
Aa #FFDCA8 sobre #F0FFFE 1,27:1 No aprobado
Aa #F5D549 sobre #C1FFA8 1,25:1 No aprobado
Aa #FE5F55 sobre #E986C6 1,24:1 No aprobado
Aa #FFDCA8 sobre #A8D9FF 1,14:1 No aprobado
Aa #FFDCA8 sobre #C1FFA8 1,13:1 No aprobado
Aa #C1FFA8 sobre #F0FFFE 1,13:1 No aprobado
Aa #F5D549 sobre #FFDCA8 1,11:1 No aprobado
Aa #F5D549 sobre #A8D9FF 1,03:1 No aprobado
Aa #5ABD5C sobre #E986C6 1,02:1 No aprobado

Paletas similares

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colores
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colores
#FFF8EA #9E7676 #815B5B #594545
4 colores
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colores
#F67280 #C06C84 #6C5B7B #355C7D
4 colores
#2B2E4A #E84545 #903749 #53354A
4 colores
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colores
#A9907E #F3DEBA #ABC4AA #675D50
4 colores