Registrarse Registrarse
Orange You Sad

Orange You Sad

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

Volver a la biblioteca

Orange You Sad

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

Editar
Colores vibrantes 12 colores Colores cálidos Tonos mixtos Armonía triádica red yellow
Me gusta 46
Colores 12

Variables CSS

:root {
  --c-vibrant-1: #3F2F46;
  --c-vibrant-2: #71354F;
  --c-vibrant-3: #A93D37;
  --c-vibrant-4: #D2677E;
  --c-vibrant-5: #F6C4C2;
  --c-vibrant-6: #FFFDC0;
  --c-vibrant-7: #FBFE81;
  --c-vibrant-8: #BAC45C;
  --c-vibrant-9: #6F7F46;
  --c-vibrant-10: #535C3A;
  --c-vibrant-11: #343F2B;
  --c-vibrant-12: #21212C;
}

Sobre esta paleta

Esta paleta de 12 colores vibrantes va de Yellow Mana (#FFFDC0), su tono más claro, a To Hell and Black (#21212C), el más oscuro. Combina Jagger, Venusian, Indiscreet, Pinkish, My Fair Lady, Yellow Mana, Yellowish Tan, Asparagus Fern, Quartz Green, Shallot Leaf, Deep Seaweed y To Hell and Black en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 22 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #FFFDC0 sobre #21212C, con 15,22: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

Jagger #3F2F46
RGB
rgb(63, 47, 70)
HSL
hsl(282, 20%, 23%)
Luminancia
0,035
Venusian #71354F
RGB
rgb(113, 53, 79)
HSL
hsl(334, 36%, 33%)
Luminancia
0,066
Indiscreet #A93D37
RGB
rgb(169, 61, 55)
HSL
hsl(3, 51%, 44%)
Luminancia
0,121
Pinkish #D2677E
RGB
rgb(210, 103, 126)
HSL
hsl(347, 54%, 61%)
Luminancia
0,249
My Fair Lady #F6C4C2
RGB
rgb(246, 196, 194)
HSL
hsl(2, 74%, 86%)
Luminancia
0,630
Yellow Mana #FFFDC0
RGB
rgb(255, 253, 192)
HSL
hsl(58, 100%, 88%)
Luminancia
0,953
Yellowish Tan #FBFE81
RGB
rgb(251, 254, 129)
HSL
hsl(61, 98%, 75%)
Luminancia
0,930
Asparagus Fern #BAC45C
RGB
rgb(186, 196, 92)
HSL
hsl(66, 47%, 56%)
Luminancia
0,507
Quartz Green #6F7F46
RGB
rgb(111, 127, 70)
HSL
hsl(77, 29%, 39%)
Luminancia
0,190
Shallot Leaf #535C3A
RGB
rgb(83, 92, 58)
HSL
hsl(76, 23%, 29%)
Luminancia
0,098
Deep Seaweed #343F2B
RGB
rgb(52, 63, 43)
HSL
hsl(93, 19%, 21%)
Luminancia
0,045
To Hell and Black #21212C
RGB
rgb(33, 33, 44)
HSL
hsl(240, 14%, 15%)
Luminancia
0,016

Contraste y accesibilidad

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

Aa #FFFDC0 sobre #21212C 15,22:1 AAA
Aa #FBFE81 sobre #21212C 14,86:1 AAA
Aa #3F2F46 sobre #FFFDC0 11,76:1 AAA
Aa #3F2F46 sobre #FBFE81 11,48:1 AAA
Aa #FFFDC0 sobre #343F2B 10,60:1 AAA
Aa #FBFE81 sobre #343F2B 10,36:1 AAA
Aa #F6C4C2 sobre #21212C 10,31:1 AAA
Aa #71354F sobre #FFFDC0 8,63:1 AAA
Aa #BAC45C sobre #21212C 8,45:1 AAA
Aa #71354F sobre #FBFE81 8,43:1 AAA
Aa #3F2F46 sobre #F6C4C2 7,97:1 AAA
Aa #F6C4C2 sobre #343F2B 7,19:1 AAA
Aa #FFFDC0 sobre #535C3A 6,78:1 AA
Aa #FBFE81 sobre #535C3A 6,62:1 AA
Aa #3F2F46 sobre #BAC45C 6,53:1 AA
Aa #BAC45C sobre #343F2B 5,89:1 AA
Aa #A93D37 sobre #FFFDC0 5,88:1 AA
Aa #71354F sobre #F6C4C2 5,85:1 AA
Aa #A93D37 sobre #FBFE81 5,75:1 AA
Aa #71354F sobre #BAC45C 4,79:1 AA
Aa #F6C4C2 sobre #535C3A 4,59:1 AA
Aa #D2677E sobre #21212C 4,54:1 AA
Aa #FFFDC0 sobre #6F7F46 4,18:1 AA, texto grande
Aa #FBFE81 sobre #6F7F46 4,08:1 AA, texto grande
Aa #A93D37 sobre #F6C4C2 3,99:1 AA, texto grande
Aa #BAC45C sobre #535C3A 3,76:1 AA, texto grande
Aa #6F7F46 sobre #21212C 3,64:1 AA, texto grande
Aa #3F2F46 sobre #D2677E 3,51:1 AA, texto grande
Aa #D2677E sobre #FFFDC0 3,35:1 AA, texto grande
Aa #D2677E sobre #FBFE81 3,28:1 AA, texto grande
Aa #A93D37 sobre #BAC45C 3,27:1 AA, texto grande
Aa #D2677E sobre #343F2B 3,16:1 AA, texto grande
Aa #F6C4C2 sobre #6F7F46 2,83:1 No aprobado
Aa #3F2F46 sobre #6F7F46 2,81:1 No aprobado
Aa #A93D37 sobre #21212C 2,59:1 No aprobado
Aa #71354F sobre #D2677E 2,57:1 No aprobado
Aa #6F7F46 sobre #343F2B 2,54:1 No aprobado
Aa #BAC45C sobre #6F7F46 2,32:1 No aprobado
Aa #D2677E sobre #F6C4C2 2,27:1 No aprobado
Aa #535C3A sobre #21212C 2,24:1 No aprobado
Aa #71354F sobre #6F7F46 2,07:1 No aprobado
Aa #D2677E sobre #535C3A 2,02:1 No aprobado
Aa #3F2F46 sobre #A93D37 2,00:1 No aprobado
Aa #D2677E sobre #BAC45C 1,86:1 No aprobado
Aa #A93D37 sobre #343F2B 1,80:1 No aprobado
Aa #FFFDC0 sobre #BAC45C 1,80:1 No aprobado
Aa #71354F sobre #21212C 1,76:1 No aprobado
Aa #FBFE81 sobre #BAC45C 1,76:1 No aprobado
Aa #A93D37 sobre #D2677E 1,75:1 No aprobado
Aa #3F2F46 sobre #535C3A 1,73:1 No aprobado
Aa #6F7F46 sobre #535C3A 1,62:1 No aprobado
Aa #535C3A sobre #343F2B 1,56:1 No aprobado
Aa #F6C4C2 sobre #FFFDC0 1,48:1 No aprobado
Aa #71354F sobre #A93D37 1,47:1 No aprobado
Aa #F6C4C2 sobre #FBFE81 1,44:1 No aprobado
Aa #343F2B sobre #21212C 1,43:1 No aprobado
Aa #A93D37 sobre #6F7F46 1,41:1 No aprobado
Aa #3F2F46 sobre #71354F 1,36:1 No aprobado
Aa #3F2F46 sobre #21212C 1,29:1 No aprobado
Aa #71354F sobre #535C3A 1,27:1 No aprobado
Aa #D2677E sobre #6F7F46 1,25:1 No aprobado
Aa #71354F sobre #343F2B 1,23:1 No aprobado
Aa #F6C4C2 sobre #BAC45C 1,22:1 No aprobado
Aa #A93D37 sobre #535C3A 1,15:1 No aprobado
Aa #3F2F46 sobre #343F2B 1,11:1 No aprobado
Aa #FFFDC0 sobre #FBFE81 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