Registrarse Registrarse
CROMATICA

CROMATICA

Paleta de 10 colores · Colores neutros · Tonos mixtos · Armonía complementaria

Volver a la biblioteca

CROMATICA

Paleta de 10 colores · Colores neutros · Tonos mixtos · Armonía complementaria

Editar
Colores vibrantes 10 colores Colores neutros Tonos mixtos Armonía complementaria vibrant colorful 10colors radiant
Me gusta 97
Colores 10

Variables CSS

:root {
  --c-vibrant-1: #FBF8FD;
  --c-vibrant-2: #A1A9D1;
  --c-vibrant-3: #007FFF;
  --c-vibrant-4: #24256F;
  --c-vibrant-5: #141218;
  --c-vibrant-6: #5F0E52;
  --c-vibrant-7: #FD1A43;
  --c-vibrant-8: #FFB16C;
  --c-vibrant-9: #FEDE5B;
  --c-vibrant-10: #74EAD6;
}

Sobre esta paleta

Esta paleta de 10 colores vibrantes va de Ghost White (#FBF8FD), su tono más claro, a Dark Void (#141218), el más oscuro. Combina Ghost White, Lilac Scent Soft Blue, Azure, After Work Blue, Dark Void, Grape Purple, Future Fuchsia, Apricot, Rodan Gold y Turquoise Chalk en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 45. De ellas, 17 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #FBF8FD sobre #141218, con 17,66: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

Ghost White #FBF8FD
RGB
rgb(251, 248, 253)
HSL
hsl(276, 56%, 98%)
Luminancia
0,947
Lilac Scent Soft Blue #A1A9D1
RGB
rgb(161, 169, 209)
HSL
hsl(230, 34%, 73%)
Luminancia
0,406
Azure #007FFF
RGB
rgb(0, 127, 255)
HSL
hsl(210, 100%, 50%)
Luminancia
0,224
After Work Blue #24256F
RGB
rgb(36, 37, 111)
HSL
hsl(239, 51%, 29%)
Luminancia
0,029
Dark Void #141218
RGB
rgb(20, 18, 24)
HSL
hsl(260, 14%, 8%)
Luminancia
0,007
Grape Purple #5F0E52
RGB
rgb(95, 14, 82)
HSL
hsl(310, 74%, 21%)
Luminancia
0,034
Future Fuchsia #FD1A43
RGB
rgb(253, 26, 67)
HSL
hsl(349, 98%, 55%)
Luminancia
0,220
Apricot #FFB16C
RGB
rgb(255, 177, 108)
HSL
hsl(28, 100%, 71%)
Luminancia
0,538
Rodan Gold #FEDE5B
RGB
rgb(254, 222, 91)
HSL
hsl(48, 99%, 68%)
Luminancia
0,741
Turquoise Chalk #74EAD6
RGB
rgb(116, 234, 214)
HSL
hsl(170, 74%, 69%)
Luminancia
0,674

Contraste y accesibilidad

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

Aa #FBF8FD sobre #141218 17,66:1 AAA
Aa #141218 sobre #FEDE5B 14,00:1 AAA
Aa #141218 sobre #74EAD6 12,82:1 AAA
Aa #FBF8FD sobre #24256F 12,71:1 AAA
Aa #FBF8FD sobre #5F0E52 11,94:1 AAA
Aa #141218 sobre #FFB16C 10,41:1 AAA
Aa #24256F sobre #FEDE5B 10,08:1 AAA
Aa #5F0E52 sobre #FEDE5B 9,46:1 AAA
Aa #24256F sobre #74EAD6 9,23:1 AAA
Aa #5F0E52 sobre #74EAD6 8,67:1 AAA
Aa #A1A9D1 sobre #141218 8,07:1 AAA
Aa #24256F sobre #FFB16C 7,49:1 AAA
Aa #5F0E52 sobre #FFB16C 7,04:1 AAA
Aa #A1A9D1 sobre #24256F 5,81:1 AA
Aa #A1A9D1 sobre #5F0E52 5,45:1 AA
Aa #007FFF sobre #141218 4,85:1 AA
Aa #141218 sobre #FD1A43 4,79:1 AA
Aa #FBF8FD sobre #FD1A43 3,69:1 AA, texto grande
Aa #FBF8FD sobre #007FFF 3,64:1 AA, texto grande
Aa #007FFF sobre #24256F 3,49:1 AA, texto grande
Aa #24256F sobre #FD1A43 3,44:1 AA, texto grande
Aa #007FFF sobre #5F0E52 3,28:1 AA, texto grande
Aa #5F0E52 sobre #FD1A43 3,23:1 AA, texto grande
Aa #FD1A43 sobre #FEDE5B 2,93:1 No aprobado
Aa #007FFF sobre #FEDE5B 2,89:1 No aprobado
Aa #FD1A43 sobre #74EAD6 2,68:1 No aprobado
Aa #007FFF sobre #74EAD6 2,64:1 No aprobado
Aa #FBF8FD sobre #A1A9D1 2,19:1 No aprobado
Aa #FD1A43 sobre #FFB16C 2,18:1 No aprobado
Aa #007FFF sobre #FFB16C 2,15:1 No aprobado
Aa #A1A9D1 sobre #FEDE5B 1,74:1 No aprobado
Aa #FBF8FD sobre #FFB16C 1,70:1 No aprobado
Aa #A1A9D1 sobre #FD1A43 1,69:1 No aprobado
Aa #A1A9D1 sobre #007FFF 1,66:1 No aprobado
Aa #A1A9D1 sobre #74EAD6 1,59:1 No aprobado
Aa #141218 sobre #5F0E52 1,48:1 No aprobado
Aa #24256F sobre #141218 1,39:1 No aprobado
Aa #FBF8FD sobre #74EAD6 1,38:1 No aprobado
Aa #FFB16C sobre #FEDE5B 1,35:1 No aprobado
Aa #A1A9D1 sobre #FFB16C 1,29:1 No aprobado
Aa #FBF8FD sobre #FEDE5B 1,26:1 No aprobado
Aa #FFB16C sobre #74EAD6 1,23:1 No aprobado
Aa #FEDE5B sobre #74EAD6 1,09:1 No aprobado
Aa #24256F sobre #5F0E52 1,07:1 No aprobado
Aa #007FFF sobre #FD1A43 1,01:1 No aprobado

Paletas similares

#EDF1D6 #9DC08B #609966 #40513B
4 colores
#F5F7F8 #F4CE14 #495E57 #45474B
4 colores
#222831 #393E46 #FFD369 #EEEEEE
4 colores
#000000 #52057B #892CDC #BC6FF1
4 colores
#213555 #3E5879 #D8C4B6 #F5EFE7
4 colores
#F5EFE7 #D8C4B6 #4F709C #213555
4 colores
#191A19 #1E5128 #4E9F3D #D8E9A8
4 colores
#352F44 #5C5470 #B9B4C7 #FAF0E6
4 colores