Registrarse Registrarse
Brite12

Brite12

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

Volver a la biblioteca

Brite12

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 brightcolors
Me gusta 10
Colores 12

Variables CSS

:root {
  --c-vibrant-1: #D30935;
  --c-vibrant-2: #FB8C1A;
  --c-vibrant-3: #F8E930;
  --c-vibrant-4: #0EA145;
  --c-vibrant-5: #17B1F3;
  --c-vibrant-6: #0B2FDD;
  --c-vibrant-7: #5B00AF;
  --c-vibrant-8: #FE4AD3;
  --c-vibrant-9: #EAE9E5;
  --c-vibrant-10: #6F7C9A;
  --c-vibrant-11: #031133;
  --c-vibrant-12: #874501;
}

Sobre esta paleta

Esta paleta de 12 colores vibrantes va de Blanco (#EAE9E5), su tono más claro, a Squid’s Ink (#031133), el más oscuro. Combina Cherry, Laddu Orange, Banana Bombshell, Boogie Blast, Zima Blue, Cold Pack, Aubergine Perl, Mat Dazzle Rose, Blanco, Infinity and Beyond, Squid’s Ink y Chocolate Pancakes en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 12 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #EAE9E5 sobre #031133, con 15,27: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

Cherry #D30935
RGB
rgb(211, 9, 53)
HSL
hsl(347, 92%, 43%)
Luminancia
0,143
Laddu Orange #FB8C1A
RGB
rgb(251, 140, 26)
HSL
hsl(30, 97%, 54%)
Luminancia
0,393
Banana Bombshell #F8E930
RGB
rgb(248, 233, 48)
HSL
hsl(56, 93%, 58%)
Luminancia
0,785
Boogie Blast #0EA145
RGB
rgb(14, 161, 69)
HSL
hsl(142, 84%, 34%)
Luminancia
0,260
Zima Blue #17B1F3
RGB
rgb(23, 177, 243)
HSL
hsl(198, 90%, 52%)
Luminancia
0,381
Cold Pack #0B2FDD
RGB
rgb(11, 47, 221)
HSL
hsl(230, 91%, 45%)
Luminancia
0,073
Aubergine Perl #5B00AF
RGB
rgb(91, 0, 175)
HSL
hsl(271, 100%, 34%)
Luminancia
0,053
Mat Dazzle Rose #FE4AD3
RGB
rgb(254, 74, 211)
HSL
hsl(314, 99%, 64%)
Luminancia
0,307
Blanco #EAE9E5
RGB
rgb(234, 233, 229)
HSL
hsl(48, 11%, 91%)
Luminancia
0,814
Infinity and Beyond #6F7C9A
RGB
rgb(111, 124, 154)
HSL
hsl(222, 18%, 52%)
Luminancia
0,201
Squid’s Ink #031133
RGB
rgb(3, 17, 51)
HSL
hsl(223, 89%, 11%)
Luminancia
0,007
Chocolate Pancakes #874501
RGB
rgb(135, 69, 1)
HSL
hsl(30, 99%, 27%)
Luminancia
0,094

Contraste y accesibilidad

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

Aa #EAE9E5 sobre #031133 15,27:1 AAA
Aa #F8E930 sobre #031133 14,75:1 AAA
Aa #5B00AF sobre #EAE9E5 8,38:1 AAA
Aa #F8E930 sobre #5B00AF 8,09:1 AAA
Aa #FB8C1A sobre #031133 7,83:1 AAA
Aa #17B1F3 sobre #031133 7,62:1 AAA
Aa #0B2FDD sobre #EAE9E5 7,01:1 AAA
Aa #F8E930 sobre #0B2FDD 6,77:1 AA
Aa #FE4AD3 sobre #031133 6,30:1 AA
Aa #EAE9E5 sobre #874501 6,00:1 AA
Aa #F8E930 sobre #874501 5,79:1 AA
Aa #0EA145 sobre #031133 5,48:1 AA
Aa #D30935 sobre #EAE9E5 4,48:1 AA, texto grande
Aa #6F7C9A sobre #031133 4,44:1 AA, texto grande
Aa #D30935 sobre #F8E930 4,32:1 AA, texto grande
Aa #FB8C1A sobre #5B00AF 4,30:1 AA, texto grande
Aa #17B1F3 sobre #5B00AF 4,18:1 AA, texto grande
Aa #FB8C1A sobre #0B2FDD 3,60:1 AA, texto grande
Aa #17B1F3 sobre #0B2FDD 3,50:1 AA, texto grande
Aa #5B00AF sobre #FE4AD3 3,46:1 AA, texto grande
Aa #EAE9E5 sobre #6F7C9A 3,44:1 AA, texto grande
Aa #D30935 sobre #031133 3,41:1 AA, texto grande
Aa #F8E930 sobre #6F7C9A 3,32:1 AA, texto grande
Aa #FB8C1A sobre #874501 3,08:1 AA, texto grande
Aa #0EA145 sobre #5B00AF 3,01:1 AA, texto grande
Aa #17B1F3 sobre #874501 2,99:1 No aprobado
Aa #0B2FDD sobre #FE4AD3 2,89:1 No aprobado
Aa #0EA145 sobre #EAE9E5 2,79:1 No aprobado
Aa #F8E930 sobre #0EA145 2,69:1 No aprobado
Aa #031133 sobre #874501 2,55:1 No aprobado
Aa #0EA145 sobre #0B2FDD 2,52:1 No aprobado
Aa #FE4AD3 sobre #874501 2,48:1 No aprobado
Aa #5B00AF sobre #6F7C9A 2,44:1 No aprobado
Aa #FE4AD3 sobre #EAE9E5 2,42:1 No aprobado
Aa #F8E930 sobre #FE4AD3 2,34:1 No aprobado
Aa #D30935 sobre #FB8C1A 2,30:1 No aprobado
Aa #D30935 sobre #17B1F3 2,23:1 No aprobado
Aa #0B2FDD sobre #031133 2,18:1 No aprobado
Aa #0EA145 sobre #874501 2,15:1 No aprobado
Aa #0B2FDD sobre #6F7C9A 2,04:1 No aprobado
Aa #17B1F3 sobre #EAE9E5 2,01:1 No aprobado
Aa #FB8C1A sobre #EAE9E5 1,95:1 No aprobado
Aa #F8E930 sobre #17B1F3 1,94:1 No aprobado
Aa #FB8C1A sobre #F8E930 1,88:1 No aprobado
Aa #D30935 sobre #5B00AF 1,87:1 No aprobado
Aa #D30935 sobre #FE4AD3 1,85:1 No aprobado
Aa #5B00AF sobre #031133 1,82:1 No aprobado
Aa #FB8C1A sobre #6F7C9A 1,76:1 No aprobado
Aa #6F7C9A sobre #874501 1,74:1 No aprobado
Aa #17B1F3 sobre #6F7C9A 1,72:1 No aprobado
Aa #D30935 sobre #0EA145 1,61:1 No aprobado
Aa #D30935 sobre #0B2FDD 1,57:1 No aprobado
Aa #FB8C1A sobre #0EA145 1,43:1 No aprobado
Aa #FE4AD3 sobre #6F7C9A 1,42:1 No aprobado
Aa #5B00AF sobre #874501 1,40:1 No aprobado
Aa #0EA145 sobre #17B1F3 1,39:1 No aprobado
Aa #D30935 sobre #874501 1,34:1 No aprobado
Aa #D30935 sobre #6F7C9A 1,30:1 No aprobado
Aa #FB8C1A sobre #FE4AD3 1,24:1 No aprobado
Aa #0EA145 sobre #6F7C9A 1,23:1 No aprobado
Aa #17B1F3 sobre #FE4AD3 1,21:1 No aprobado
Aa #0B2FDD sobre #5B00AF 1,19:1 No aprobado
Aa #0B2FDD sobre #874501 1,17:1 No aprobado
Aa #0EA145 sobre #FE4AD3 1,15:1 No aprobado
Aa #F8E930 sobre #EAE9E5 1,04:1 No aprobado
Aa #FB8C1A sobre #17B1F3 1,03: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