Criar conta Criar conta
Orange You Sad

Orange You Sad

Paleta de 12 cores · Quente · Mista · Harmonia: Triádica

Voltar à biblioteca

Orange You Sad

Paleta de 12 cores · Temperatura: Quente · Tonalidade: Mista · Harmonia: Triádica

Editar
Vibrante 12 cores Quente Mista Triádica red yellow
Curtidas 46
Cores 12

Variáveis 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 vibrante de 12 cores vai de Yellow Mana (#FFFDC0), o tom mais claro, até To Hell and Black (#21212C), o mais escuro. Ela reúne Jagger, Venusian, Indiscreet, Pinkish, My Fair Lady, Yellow Mana, Yellowish Tan, Asparagus Fern, Quartz Green, Shallot Leaf, Deep Seaweed e To Hell and Black em um único conjunto que você pode levar direto para uma interface. Dos seus 66 pares de cores, 22 atingem o limiar de contraste WCAG AA (4,5:1) para texto corrido — o mais forte é #FFFDC0 sobre #21212C, com 15,22:1.

Uma paleta versátil para páginas de marketing, blocos hero de produtos, ilustrações e estados de destaque na interface.

Análise das cores

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

Contraste e acessibilidade

22 de 66 pares de cores atingem o limiar de contraste WCAG AA (4,5:1) para texto corrido.

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 Reprovado
Aa #3F2F46 sobre #6F7F46 2,81:1 Reprovado
Aa #A93D37 sobre #21212C 2,59:1 Reprovado
Aa #71354F sobre #D2677E 2,57:1 Reprovado
Aa #6F7F46 sobre #343F2B 2,54:1 Reprovado
Aa #BAC45C sobre #6F7F46 2,32:1 Reprovado
Aa #D2677E sobre #F6C4C2 2,27:1 Reprovado
Aa #535C3A sobre #21212C 2,24:1 Reprovado
Aa #71354F sobre #6F7F46 2,07:1 Reprovado
Aa #D2677E sobre #535C3A 2,02:1 Reprovado
Aa #3F2F46 sobre #A93D37 2,00:1 Reprovado
Aa #D2677E sobre #BAC45C 1,86:1 Reprovado
Aa #A93D37 sobre #343F2B 1,80:1 Reprovado
Aa #FFFDC0 sobre #BAC45C 1,80:1 Reprovado
Aa #71354F sobre #21212C 1,76:1 Reprovado
Aa #FBFE81 sobre #BAC45C 1,76:1 Reprovado
Aa #A93D37 sobre #D2677E 1,75:1 Reprovado
Aa #3F2F46 sobre #535C3A 1,73:1 Reprovado
Aa #6F7F46 sobre #535C3A 1,62:1 Reprovado
Aa #535C3A sobre #343F2B 1,56:1 Reprovado
Aa #F6C4C2 sobre #FFFDC0 1,48:1 Reprovado
Aa #71354F sobre #A93D37 1,47:1 Reprovado
Aa #F6C4C2 sobre #FBFE81 1,44:1 Reprovado
Aa #343F2B sobre #21212C 1,43:1 Reprovado
Aa #A93D37 sobre #6F7F46 1,41:1 Reprovado
Aa #3F2F46 sobre #71354F 1,36:1 Reprovado
Aa #3F2F46 sobre #21212C 1,29:1 Reprovado
Aa #71354F sobre #535C3A 1,27:1 Reprovado
Aa #D2677E sobre #6F7F46 1,25:1 Reprovado
Aa #71354F sobre #343F2B 1,23:1 Reprovado
Aa #F6C4C2 sobre #BAC45C 1,22:1 Reprovado
Aa #A93D37 sobre #535C3A 1,15:1 Reprovado
Aa #3F2F46 sobre #343F2B 1,11:1 Reprovado
Aa #FFFDC0 sobre #FBFE81 1,02:1 Reprovado

Paletas semelhantes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 cores
#7D5A50 #B4846C #E5B299 #FCDEC0
4 cores
#FFF8EA #9E7676 #815B5B #594545
4 cores
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 cores
#F67280 #C06C84 #6C5B7B #355C7D
4 cores
#2B2E4A #E84545 #903749 #53354A
4 cores
#E5D9B6 #A4BE7B #5F8D4E #285430
4 cores
#A9907E #F3DEBA #ABC4AA #675D50
4 cores