Registrarse Registrarse
Sunfall 12

Sunfall 12

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

Volver a la biblioteca

Sunfall 12

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

Editar
Colores vibrantes 12 colores Colores cálidos Tonos mixtos Armonía análoga orange midnight pink purple
Me gusta 106
Colores 12

Variables CSS

:root {
  --c-vibrant-1: #1F0A1F;
  --c-vibrant-2: #4D1059;
  --c-vibrant-3: #6B155E;
  --c-vibrant-4: #8C2964;
  --c-vibrant-5: #A63169;
  --c-vibrant-6: #C23E6E;
  --c-vibrant-7: #D94E6A;
  --c-vibrant-8: #DE6B5B;
  --c-vibrant-9: #ED9A6D;
  --c-vibrant-10: #FFC37A;
  --c-vibrant-11: #FFEB99;
  --c-vibrant-12: #FEFFCF;
}

Sobre esta paleta

Esta paleta de 12 colores vibrantes va de Ice Yellow (#FEFFCF), su tono más claro, a Meški Black (#1F0A1F), el más oscuro. Combina Meški Black, Cosmic Explorer, Purple Curse, Beetiful Magenta, Valentine’s Day, Lilac Rose, Rosy Cheeks, Coralite, Florida Mango, Bronze Blush, Old Yella y Ice Yellow en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 20 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #1F0A1F sobre #FEFFCF, con 18,21: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

Meški Black #1F0A1F
RGB
rgb(31, 10, 31)
HSL
hsl(300, 51%, 8%)
Luminancia
0,006
Cosmic Explorer #4D1059
RGB
rgb(77, 16, 89)
HSL
hsl(290, 70%, 21%)
Luminancia
0,027
Purple Curse #6B155E
RGB
rgb(107, 21, 94)
HSL
hsl(309, 67%, 25%)
Luminancia
0,045
Beetiful Magenta #8C2964
RGB
rgb(140, 41, 100)
HSL
hsl(324, 55%, 35%)
Luminancia
0,081
Valentine’s Day #A63169
RGB
rgb(166, 49, 105)
HSL
hsl(331, 54%, 42%)
Luminancia
0,113
Lilac Rose #C23E6E
RGB
rgb(194, 62, 110)
HSL
hsl(338, 52%, 50%)
Luminancia
0,160
Rosy Cheeks #D94E6A
RGB
rgb(217, 78, 106)
HSL
hsl(348, 65%, 58%)
Luminancia
0,212
Coralite #DE6B5B
RGB
rgb(222, 107, 91)
HSL
hsl(7, 66%, 61%)
Luminancia
0,268
Florida Mango #ED9A6D
RGB
rgb(237, 154, 109)
HSL
hsl(21, 78%, 68%)
Luminancia
0,422
Bronze Blush #FFC37A
RGB
rgb(255, 195, 122)
HSL
hsl(33, 100%, 74%)
Luminancia
0,617
Old Yella #FFEB99
RGB
rgb(255, 235, 153)
HSL
hsl(48, 100%, 80%)
Luminancia
0,830
Ice Yellow #FEFFCF
RGB
rgb(254, 255, 207)
HSL
hsl(61, 100%, 91%)
Luminancia
0,971

Contraste y accesibilidad

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

Aa #1F0A1F sobre #FEFFCF 18,21:1 AAA
Aa #1F0A1F sobre #FFEB99 15,69:1 AAA
Aa #4D1059 sobre #FEFFCF 13,31:1 AAA
Aa #1F0A1F sobre #FFC37A 11,89:1 AAA
Aa #4D1059 sobre #FFEB99 11,47:1 AAA
Aa #6B155E sobre #FEFFCF 10,78:1 AAA
Aa #6B155E sobre #FFEB99 9,29:1 AAA
Aa #4D1059 sobre #FFC37A 8,70:1 AAA
Aa #1F0A1F sobre #ED9A6D 8,42:1 AAA
Aa #8C2964 sobre #FEFFCF 7,80:1 AAA
Aa #6B155E sobre #FFC37A 7,04:1 AAA
Aa #8C2964 sobre #FFEB99 6,73:1 AA
Aa #A63169 sobre #FEFFCF 6,25:1 AA
Aa #4D1059 sobre #ED9A6D 6,16:1 AA
Aa #1F0A1F sobre #DE6B5B 5,67:1 AA
Aa #A63169 sobre #FFEB99 5,39:1 AA
Aa #8C2964 sobre #FFC37A 5,10:1 AA
Aa #6B155E sobre #ED9A6D 4,99:1 AA
Aa #C23E6E sobre #FEFFCF 4,85:1 AA
Aa #1F0A1F sobre #D94E6A 4,68:1 AA
Aa #C23E6E sobre #FFEB99 4,18:1 AA, texto grande
Aa #4D1059 sobre #DE6B5B 4,15:1 AA, texto grande
Aa #A63169 sobre #FFC37A 4,09:1 AA, texto grande
Aa #D94E6A sobre #FEFFCF 3,89:1 AA, texto grande
Aa #1F0A1F sobre #C23E6E 3,75:1 AA, texto grande
Aa #8C2964 sobre #ED9A6D 3,61:1 AA, texto grande
Aa #4D1059 sobre #D94E6A 3,42:1 AA, texto grande
Aa #6B155E sobre #DE6B5B 3,36:1 AA, texto grande
Aa #D94E6A sobre #FFEB99 3,35:1 AA, texto grande
Aa #DE6B5B sobre #FEFFCF 3,21:1 AA, texto grande
Aa #C23E6E sobre #FFC37A 3,17:1 AA, texto grande
Aa #1F0A1F sobre #A63169 2,91:1 No aprobado
Aa #A63169 sobre #ED9A6D 2,89:1 No aprobado
Aa #6B155E sobre #D94E6A 2,77:1 No aprobado
Aa #DE6B5B sobre #FFEB99 2,77:1 No aprobado
Aa #4D1059 sobre #C23E6E 2,74:1 No aprobado
Aa #D94E6A sobre #FFC37A 2,54:1 No aprobado
Aa #8C2964 sobre #DE6B5B 2,43:1 No aprobado
Aa #1F0A1F sobre #8C2964 2,33:1 No aprobado
Aa #C23E6E sobre #ED9A6D 2,24:1 No aprobado
Aa #6B155E sobre #C23E6E 2,22:1 No aprobado
Aa #ED9A6D sobre #FEFFCF 2,16:1 No aprobado
Aa #4D1059 sobre #A63169 2,13:1 No aprobado
Aa #DE6B5B sobre #FFC37A 2,10:1 No aprobado
Aa #8C2964 sobre #D94E6A 2,01:1 No aprobado
Aa #A63169 sobre #DE6B5B 1,95:1 No aprobado
Aa #ED9A6D sobre #FFEB99 1,86:1 No aprobado
Aa #D94E6A sobre #ED9A6D 1,80:1 No aprobado
Aa #6B155E sobre #A63169 1,72:1 No aprobado
Aa #4D1059 sobre #8C2964 1,71:1 No aprobado
Aa #1F0A1F sobre #6B155E 1,69:1 No aprobado
Aa #8C2964 sobre #C23E6E 1,61:1 No aprobado
Aa #A63169 sobre #D94E6A 1,61:1 No aprobado
Aa #FFC37A sobre #FEFFCF 1,53:1 No aprobado
Aa #C23E6E sobre #DE6B5B 1,51:1 No aprobado
Aa #DE6B5B sobre #ED9A6D 1,48:1 No aprobado
Aa #ED9A6D sobre #FFC37A 1,41:1 No aprobado
Aa #6B155E sobre #8C2964 1,38:1 No aprobado
Aa #1F0A1F sobre #4D1059 1,37:1 No aprobado
Aa #FFC37A sobre #FFEB99 1,32:1 No aprobado
Aa #A63169 sobre #C23E6E 1,29:1 No aprobado
Aa #8C2964 sobre #A63169 1,25:1 No aprobado
Aa #C23E6E sobre #D94E6A 1,25:1 No aprobado
Aa #4D1059 sobre #6B155E 1,23:1 No aprobado
Aa #D94E6A sobre #DE6B5B 1,21:1 No aprobado
Aa #FFEB99 sobre #FEFFCF 1,16: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