Registrarse Registrarse
GG EyeStrain

GG EyeStrain

Paleta de 8 colores · Colores cálidos · Tonos claros · Armonía complementaria

Volver a la biblioteca

GG EyeStrain

Paleta de 8 colores · Colores cálidos · Tonos claros · Armonía complementaria

Editar
Colores vibrantes 8 colores Colores cálidos Tonos claros Armonía complementaria 8 saturated bright small
Me gusta 27
Colores 8

Variables CSS

:root {
  --c-vibrant-1: #4F2D6F;
  --c-vibrant-2: #354DFF;
  --c-vibrant-3: #FF2D3F;
  --c-vibrant-4: #FFF34D;
  --c-vibrant-5: #76FF44;
  --c-vibrant-6: #FF3BFB;
  --c-vibrant-7: #AFFFF9;
  --c-vibrant-8: #FFF9FF;
}

Sobre esta paleta

Esta paleta de 8 colores vibrantes va de Cold Snow (#FFF9FF), su tono más claro, a Purple Seduction (#4F2D6F), el más oscuro. Combina Purple Seduction, Blueshift, Strawberry, Yellow Cattleya, Lush Greenery, Dried Magenta, Frostbite y Cold Snow en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 28. De ellas, 7 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #4F2D6F sobre #FFF9FF, con 10,45: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

Purple Seduction #4F2D6F
RGB
rgb(79, 45, 111)
HSL
hsl(271, 42%, 31%)
Luminancia
0,047
Blueshift #354DFF
RGB
rgb(53, 77, 255)
HSL
hsl(233, 100%, 60%)
Luminancia
0,133
Strawberry #FF2D3F
RGB
rgb(255, 45, 63)
HSL
hsl(355, 100%, 59%)
Luminancia
0,235
Yellow Cattleya #FFF34D
RGB
rgb(255, 243, 77)
HSL
hsl(56, 100%, 65%)
Luminancia
0,859
Lush Greenery #76FF44
RGB
rgb(118, 255, 68)
HSL
hsl(104, 100%, 63%)
Luminancia
0,758
Dried Magenta #FF3BFB
RGB
rgb(255, 59, 251)
HSL
hsl(301, 100%, 62%)
Luminancia
0,314
Frostbite #AFFFF9
RGB
rgb(175, 255, 249)
HSL
hsl(176, 100%, 84%)
Luminancia
0,875
Cold Snow #FFF9FF
RGB
rgb(255, 249, 255)
HSL
hsl(300, 100%, 99%)
Luminancia
0,962

Contraste y accesibilidad

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

Aa #4F2D6F sobre #FFF9FF 10,45:1 AAA
Aa #4F2D6F sobre #AFFFF9 9,55:1 AAA
Aa #4F2D6F sobre #FFF34D 9,38:1 AAA
Aa #4F2D6F sobre #76FF44 8,34:1 AAA
Aa #354DFF sobre #FFF9FF 5,54:1 AA
Aa #354DFF sobre #AFFFF9 5,06:1 AA
Aa #354DFF sobre #FFF34D 4,97:1 AA
Aa #354DFF sobre #76FF44 4,42:1 AA, texto grande
Aa #4F2D6F sobre #FF3BFB 3,75:1 AA, texto grande
Aa #FF2D3F sobre #FFF9FF 3,55:1 AA, texto grande
Aa #FF2D3F sobre #AFFFF9 3,25:1 AA, texto grande
Aa #FF2D3F sobre #FFF34D 3,19:1 AA, texto grande
Aa #4F2D6F sobre #FF2D3F 2,94:1 No aprobado
Aa #FF2D3F sobre #76FF44 2,84:1 No aprobado
Aa #FF3BFB sobre #FFF9FF 2,78:1 No aprobado
Aa #FF3BFB sobre #AFFFF9 2,54:1 No aprobado
Aa #FFF34D sobre #FF3BFB 2,50:1 No aprobado
Aa #76FF44 sobre #FF3BFB 2,22:1 No aprobado
Aa #354DFF sobre #FF3BFB 1,99:1 No aprobado
Aa #4F2D6F sobre #354DFF 1,89:1 No aprobado
Aa #354DFF sobre #FF2D3F 1,56:1 No aprobado
Aa #FF2D3F sobre #FF3BFB 1,28:1 No aprobado
Aa #76FF44 sobre #FFF9FF 1,25:1 No aprobado
Aa #76FF44 sobre #AFFFF9 1,14:1 No aprobado
Aa #FFF34D sobre #76FF44 1,13:1 No aprobado
Aa #FFF34D sobre #FFF9FF 1,11:1 No aprobado
Aa #AFFFF9 sobre #FFF9FF 1,09:1 No aprobado
Aa #FFF34D sobre #AFFFF9 1,02:1 No aprobado

Paletas similares

#FFF5E4 #FFE3E1 #FFD1D1 #FF9494
4 colores
#F9F5F6 #F8E8EE #FDCEDF #F2BED1
4 colores
#FFC7C7 #FFE2E2 #F6F6F6 #8785A2
4 colores
#AD8B73 #CEAB93 #E3CAA5 #FFFBE9
4 colores
#F38181 #FCE38A #EAFFD0 #95E1D3
4 colores
#B7C4CF #EEE3CB #D7C0AE #967E76
4 colores
#FFEDDB #EDCDBB #E3B7A0 #BF9270
4 colores
#8D7B68 #A4907C #C8B6A6 #F1DEC9
4 colores