Реєстрація Реєстрація
War Train

War Train

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

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

War Train

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

Редагувати
Приглушені 12 кольорів Нейтральні Змішані Комплементарна green purple natural mud
Вподобання 9
Кольори 12

CSS-змінні

:root {
  --c-muted-1: #103F2F;
  --c-muted-2: #38574F;
  --c-muted-3: #5A794F;
  --c-muted-4: #89AC4F;
  --c-muted-5: #B2DC8F;
  --c-muted-6: #5D531C;
  --c-muted-7: #3D4308;
  --c-muted-8: #8C6DAF;
  --c-muted-9: #7C2D9F;
  --c-muted-10: #4C3D5F;
  --c-muted-11: #303C3C;
  --c-muted-12: #505C5C;
}

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

Ця приглушена палітра з 12 кольорів охоплює діапазон від Sage Sensation (#B2DC8F), найсвітлішого тону, до Mizukaze Green (#103F2F), найтемнішого. Вона об'єднує Mizukaze Green, Balsam Branch, Torrey Pine, Mosquito Fern, Sage Sensation, Bronze Olive, Green Not Found, Violet Frog, Skeletor’s Cape, Powerful Mauve, Edge of the Galaxy та Midnight in NY в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 8 з них, найконтрастніша — #103F2F на #B2DC8F (7,62:1).

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

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

Mizukaze Green #103F2F
RGB
rgb(16, 63, 47)
HSL
hsl(160, 59%, 15%)
Яскравість
0,039
Balsam Branch #38574F
RGB
rgb(56, 87, 79)
HSL
hsl(165, 22%, 28%)
Яскравість
0,082
Torrey Pine #5A794F
RGB
rgb(90, 121, 79)
HSL
hsl(104, 21%, 39%)
Яскравість
0,164
Mosquito Fern #89AC4F
RGB
rgb(137, 172, 79)
HSL
hsl(83, 37%, 49%)
Яскравість
0,354
Sage Sensation #B2DC8F
RGB
rgb(178, 220, 143)
HSL
hsl(93, 52%, 71%)
Яскравість
0,626
Bronze Olive #5D531C
RGB
rgb(93, 83, 28)
HSL
hsl(51, 54%, 24%)
Яскравість
0,086
Green Not Found #3D4308
RGB
rgb(61, 67, 8)
HSL
hsl(66, 79%, 15%)
Яскравість
0,050
Violet Frog #8C6DAF
RGB
rgb(140, 109, 175)
HSL
hsl(268, 29%, 56%)
Яскравість
0,196
Skeletor’s Cape #7C2D9F
RGB
rgb(124, 45, 159)
HSL
hsl(282, 56%, 40%)
Яскравість
0,087
Powerful Mauve #4C3D5F
RGB
rgb(76, 61, 95)
HSL
hsl(266, 22%, 31%)
Яскравість
0,057
Edge of the Galaxy #303C3C
RGB
rgb(48, 60, 60)
HSL
hsl(180, 11%, 21%)
Яскравість
0,042
Midnight in NY #505C5C
RGB
rgb(80, 92, 92)
HSL
hsl(180, 7%, 34%)
Яскравість
0,101

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

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

Aa #103F2F на #B2DC8F 7,62:1 AAA
Aa #B2DC8F на #303C3C 7,36:1 AAA
Aa #B2DC8F на #3D4308 6,75:1 AA
Aa #B2DC8F на #4C3D5F 6,32:1 AA
Aa #38574F на #B2DC8F 5,12:1 AA
Aa #B2DC8F на #5D531C 4,97:1 AA
Aa #B2DC8F на #7C2D9F 4,95:1 AA
Aa #103F2F на #89AC4F 4,55:1 AA
Aa #B2DC8F на #505C5C 4,47:1 AA, великий текст
Aa #89AC4F на #303C3C 4,40:1 AA, великий текст
Aa #89AC4F на #3D4308 4,03:1 AA, великий текст
Aa #89AC4F на #4C3D5F 3,77:1 AA, великий текст
Aa #5A794F на #B2DC8F 3,16:1 AA, великий текст
Aa #38574F на #89AC4F 3,05:1 AA, великий текст
Aa #89AC4F на #5D531C 2,97:1 Не проходить
Aa #89AC4F на #7C2D9F 2,96:1 Не проходить
Aa #103F2F на #8C6DAF 2,77:1 Не проходить
Aa #B2DC8F на #8C6DAF 2,75:1 Не проходить
Aa #8C6DAF на #303C3C 2,68:1 Не проходить
Aa #89AC4F на #505C5C 2,67:1 Не проходить
Aa #3D4308 на #8C6DAF 2,45:1 Не проходить
Aa #103F2F на #5A794F 2,41:1 Не проходить
Aa #5A794F на #303C3C 2,33:1 Не проходить
Aa #8C6DAF на #4C3D5F 2,30:1 Не проходить
Aa #5A794F на #3D4308 2,14:1 Не проходить
Aa #5A794F на #4C3D5F 2,00:1 Не проходить
Aa #5A794F на #89AC4F 1,89:1 Не проходить
Aa #38574F на #8C6DAF 1,86:1 Не проходить
Aa #5D531C на #8C6DAF 1,81:1 Не проходить
Aa #8C6DAF на #7C2D9F 1,80:1 Не проходить
Aa #103F2F на #505C5C 1,71:1 Не проходить
Aa #89AC4F на #B2DC8F 1,67:1 Не проходить
Aa #303C3C на #505C5C 1,65:1 Не проходить
Aa #89AC4F на #8C6DAF 1,64:1 Не проходить
Aa #8C6DAF на #505C5C 1,63:1 Не проходить
Aa #38574F на #5A794F 1,62:1 Не проходить
Aa #5A794F на #5D531C 1,57:1 Не проходить
Aa #5A794F на #7C2D9F 1,57:1 Не проходить
Aa #103F2F на #7C2D9F 1,54:1 Не проходить
Aa #103F2F на #5D531C 1,53:1 Не проходить
Aa #3D4308 на #505C5C 1,51:1 Не проходить
Aa #103F2F на #38574F 1,49:1 Не проходить
Aa #7C2D9F на #303C3C 1,49:1 Не проходить
Aa #5D531C на #303C3C 1,48:1 Не проходить
Aa #38574F на #303C3C 1,44:1 Не проходить
Aa #5A794F на #505C5C 1,42:1 Не проходить
Aa #4C3D5F на #505C5C 1,41:1 Не проходить
Aa #5D531C на #3D4308 1,36:1 Не проходить
Aa #3D4308 на #7C2D9F 1,36:1 Не проходить
Aa #38574F на #3D4308 1,32:1 Не проходить
Aa #7C2D9F на #4C3D5F 1,28:1 Не проходить
Aa #5D531C на #4C3D5F 1,27:1 Не проходить
Aa #38574F на #4C3D5F 1,24:1 Не проходить
Aa #103F2F на #4C3D5F 1,21:1 Не проходить
Aa #4C3D5F на #303C3C 1,16:1 Не проходить
Aa #5A794F на #8C6DAF 1,15:1 Не проходить
Aa #38574F на #505C5C 1,14:1 Не проходить
Aa #103F2F на #3D4308 1,13:1 Не проходить
Aa #5D531C на #505C5C 1,11:1 Не проходить
Aa #7C2D9F на #505C5C 1,11:1 Не проходить
Aa #3D4308 на #303C3C 1,09:1 Не проходить
Aa #3D4308 на #4C3D5F 1,07:1 Не проходить
Aa #103F2F на #303C3C 1,04:1 Не проходить
Aa #38574F на #5D531C 1,03:1 Не проходить
Aa #38574F на #7C2D9F 1,03:1 Не проходить
Aa #5D531C на #7C2D9F 1,00:1 Не проходить

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

#EDF1D6 #9DC08B #609966 #40513B
4 кольори
#F5F7F8 #F4CE14 #495E57 #45474B
4 кольори
#222831 #393E46 #FFD369 #EEEEEE
4 кольори
#000000 #52057B #892CDC #BC6FF1
4 кольори
#213555 #3E5879 #D8C4B6 #F5EFE7
4 кольори
#F5EFE7 #D8C4B6 #4F709C #213555
4 кольори
#191A19 #1E5128 #4E9F3D #D8E9A8
4 кольори
#352F44 #5C5470 #B9B4C7 #FAF0E6
4 кольори