Реєстрація Реєстрація
Orange You Sad

Orange You Sad

Палітра з 12 кольорів · Теплі · Змішані · Тріадна гармонія

До бібліотеки

Orange You Sad

Палітра з 12 кольорів · Теплі кольори · Змішані тони · Тріадна гармонія

Редагувати
Яскраві 12 кольорів Теплі Змішані Тріадна red yellow
Вподобання 46
Кольори 12

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;
}

Про цю палітру

Ця яскрава палітра з 12 кольорів охоплює діапазон від Yellow Mana (#FFFDC0), найсвітлішого тону, до To Hell and Black (#21212C), найтемнішого. Вона об'єднує Jagger, Venusian, Indiscreet, Pinkish, My Fair Lady, Yellow Mana, Yellowish Tan, Asparagus Fern, Quartz Green, Shallot Leaf, Deep Seaweed та To Hell and Black в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 22 з них, найконтрастніша — #FFFDC0 на #21212C (15,22:1).

Універсальна палітра для маркетингових сторінок, hero-блоків продукту, ілюстрацій і акцентних станів інтерфейсу.

Розбір кольорів

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

Контраст і доступність

Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 22 з них.

Aa #FFFDC0 на #21212C 15,22:1 AAA
Aa #FBFE81 на #21212C 14,86:1 AAA
Aa #3F2F46 на #FFFDC0 11,76:1 AAA
Aa #3F2F46 на #FBFE81 11,48:1 AAA
Aa #FFFDC0 на #343F2B 10,60:1 AAA
Aa #FBFE81 на #343F2B 10,36:1 AAA
Aa #F6C4C2 на #21212C 10,31:1 AAA
Aa #71354F на #FFFDC0 8,63:1 AAA
Aa #BAC45C на #21212C 8,45:1 AAA
Aa #71354F на #FBFE81 8,43:1 AAA
Aa #3F2F46 на #F6C4C2 7,97:1 AAA
Aa #F6C4C2 на #343F2B 7,19:1 AAA
Aa #FFFDC0 на #535C3A 6,78:1 AA
Aa #FBFE81 на #535C3A 6,62:1 AA
Aa #3F2F46 на #BAC45C 6,53:1 AA
Aa #BAC45C на #343F2B 5,89:1 AA
Aa #A93D37 на #FFFDC0 5,88:1 AA
Aa #71354F на #F6C4C2 5,85:1 AA
Aa #A93D37 на #FBFE81 5,75:1 AA
Aa #71354F на #BAC45C 4,79:1 AA
Aa #F6C4C2 на #535C3A 4,59:1 AA
Aa #D2677E на #21212C 4,54:1 AA
Aa #FFFDC0 на #6F7F46 4,18:1 AA, великий текст
Aa #FBFE81 на #6F7F46 4,08:1 AA, великий текст
Aa #A93D37 на #F6C4C2 3,99:1 AA, великий текст
Aa #BAC45C на #535C3A 3,76:1 AA, великий текст
Aa #6F7F46 на #21212C 3,64:1 AA, великий текст
Aa #3F2F46 на #D2677E 3,51:1 AA, великий текст
Aa #D2677E на #FFFDC0 3,35:1 AA, великий текст
Aa #D2677E на #FBFE81 3,28:1 AA, великий текст
Aa #A93D37 на #BAC45C 3,27:1 AA, великий текст
Aa #D2677E на #343F2B 3,16:1 AA, великий текст
Aa #F6C4C2 на #6F7F46 2,83:1 Не проходить
Aa #3F2F46 на #6F7F46 2,81:1 Не проходить
Aa #A93D37 на #21212C 2,59:1 Не проходить
Aa #71354F на #D2677E 2,57:1 Не проходить
Aa #6F7F46 на #343F2B 2,54:1 Не проходить
Aa #BAC45C на #6F7F46 2,32:1 Не проходить
Aa #D2677E на #F6C4C2 2,27:1 Не проходить
Aa #535C3A на #21212C 2,24:1 Не проходить
Aa #71354F на #6F7F46 2,07:1 Не проходить
Aa #D2677E на #535C3A 2,02:1 Не проходить
Aa #3F2F46 на #A93D37 2,00:1 Не проходить
Aa #D2677E на #BAC45C 1,86:1 Не проходить
Aa #A93D37 на #343F2B 1,80:1 Не проходить
Aa #FFFDC0 на #BAC45C 1,80:1 Не проходить
Aa #71354F на #21212C 1,76:1 Не проходить
Aa #FBFE81 на #BAC45C 1,76:1 Не проходить
Aa #A93D37 на #D2677E 1,75:1 Не проходить
Aa #3F2F46 на #535C3A 1,73:1 Не проходить
Aa #6F7F46 на #535C3A 1,62:1 Не проходить
Aa #535C3A на #343F2B 1,56:1 Не проходить
Aa #F6C4C2 на #FFFDC0 1,48:1 Не проходить
Aa #71354F на #A93D37 1,47:1 Не проходить
Aa #F6C4C2 на #FBFE81 1,44:1 Не проходить
Aa #343F2B на #21212C 1,43:1 Не проходить
Aa #A93D37 на #6F7F46 1,41:1 Не проходить
Aa #3F2F46 на #71354F 1,36:1 Не проходить
Aa #3F2F46 на #21212C 1,29:1 Не проходить
Aa #71354F на #535C3A 1,27:1 Не проходить
Aa #D2677E на #6F7F46 1,25:1 Не проходить
Aa #71354F на #343F2B 1,23:1 Не проходить
Aa #F6C4C2 на #BAC45C 1,22:1 Не проходить
Aa #A93D37 на #535C3A 1,15:1 Не проходить
Aa #3F2F46 на #343F2B 1,11:1 Не проходить
Aa #FFFDC0 на #FBFE81 1,02:1 Не проходить

Схожі палітри

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