Реєстрація Реєстрація
Gas Station 12

Gas Station 12

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

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

Gas Station 12

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

Редагувати
Приглушені 12 кольорів Теплі Темні Монохромна green dark blue cyan
Вподобання 51
Кольори 12

CSS-змінні

:root {
  --c-muted-1: #BABE7C;
  --c-muted-2: #7D825A;
  --c-muted-3: #49513E;
  --c-muted-4: #373F34;
  --c-muted-5: #443F2D;
  --c-muted-6: #2F2D22;
  --c-muted-7: #1C1C17;
  --c-muted-8: #151614;
  --c-muted-9: #519585;
  --c-muted-10: #376862;
  --c-muted-11: #203F42;
  --c-muted-12: #19343A;
}

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

Ця приглушена палітра з 12 кольорів охоплює діапазон від Pine Glade (#BABE7C), найсвітлішого тону, до Matt Black (#151614), найтемнішого. Вона об'єднує Pine Glade, Mosstone, Savannah Moss, Aged Pine, Woodrush, Karaka, Coco’s Black, Matt Black, Crisp Lettuce, Seiheki Green, Pine Hollow та Ore Bluish Black в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 10 з них, найконтрастніша — #BABE7C на #151614 (9,29:1).

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

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

Pine Glade #BABE7C
RGB
rgb(186, 190, 124)
HSL
hsl(64, 34%, 62%)
Яскравість
0,487
Mosstone #7D825A
RGB
rgb(125, 130, 90)
HSL
hsl(68, 18%, 43%)
Яскравість
0,211
Savannah Moss #49513E
RGB
rgb(73, 81, 62)
HSL
hsl(85, 13%, 28%)
Яскравість
0,077
Aged Pine #373F34
RGB
rgb(55, 63, 52)
HSL
hsl(104, 10%, 23%)
Яскравість
0,046
Woodrush #443F2D
RGB
rgb(68, 63, 45)
HSL
hsl(47, 20%, 22%)
Яскравість
0,050
Karaka #2F2D22
RGB
rgb(47, 45, 34)
HSL
hsl(51, 16%, 16%)
Яскравість
0,026
Coco’s Black #1C1C17
RGB
rgb(28, 28, 23)
HSL
hsl(60, 10%, 10%)
Яскравість
0,011
Matt Black #151614
RGB
rgb(21, 22, 20)
HSL
hsl(90, 5%, 8%)
Яскравість
0,008
Crisp Lettuce #519585
RGB
rgb(81, 149, 133)
HSL
hsl(166, 30%, 45%)
Яскравість
0,249
Seiheki Green #376862
RGB
rgb(55, 104, 98)
HSL
hsl(173, 31%, 31%)
Яскравість
0,116
Pine Hollow #203F42
RGB
rgb(32, 63, 66)
HSL
hsl(185, 35%, 19%)
Яскравість
0,043
Ore Bluish Black #19343A
RGB
rgb(25, 52, 58)
HSL
hsl(191, 40%, 16%)
Яскравість
0,030

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

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

Aa #BABE7C на #151614 9,29:1 AAA
Aa #BABE7C на #1C1C17 8,75:1 AAA
Aa #BABE7C на #2F2D22 7,07:1 AAA
Aa #BABE7C на #19343A 6,74:1 AA
Aa #BABE7C на #203F42 5,80:1 AA
Aa #BABE7C на #373F34 5,59:1 AA
Aa #BABE7C на #443F2D 5,39:1 AA
Aa #151614 на #519585 5,18:1 AA
Aa #1C1C17 на #519585 4,88:1 AA
Aa #7D825A на #151614 4,51:1 AA
Aa #BABE7C на #49513E 4,25:1 AA, великий текст
Aa #7D825A на #1C1C17 4,25:1 AA, великий текст
Aa #2F2D22 на #519585 3,94:1 AA, великий текст
Aa #519585 на #19343A 3,76:1 AA, великий текст
Aa #7D825A на #2F2D22 3,43:1 AA, великий текст
Aa #7D825A на #19343A 3,27:1 AA, великий текст
Aa #BABE7C на #376862 3,24:1 AA, великий текст
Aa #519585 на #203F42 3,23:1 AA, великий текст
Aa #373F34 на #519585 3,11:1 AA, великий текст
Aa #443F2D на #519585 3,00:1 AA, великий текст
Aa #151614 на #376862 2,87:1 Не проходить
Aa #7D825A на #203F42 2,82:1 Не проходить
Aa #7D825A на #373F34 2,71:1 Не проходить
Aa #1C1C17 на #376862 2,70:1 Не проходить
Aa #7D825A на #443F2D 2,61:1 Не проходить
Aa #49513E на #519585 2,37:1 Не проходить
Aa #49513E на #151614 2,19:1 Не проходить
Aa #2F2D22 на #376862 2,18:1 Не проходить
Aa #376862 на #19343A 2,08:1 Не проходить
Aa #BABE7C на #7D825A 2,06:1 Не проходить
Aa #7D825A на #49513E 2,06:1 Не проходить
Aa #49513E на #1C1C17 2,06:1 Не проходить
Aa #519585 на #376862 1,80:1 Не проходить
Aa #BABE7C на #519585 1,79:1 Не проходить
Aa #376862 на #203F42 1,79:1 Не проходить
Aa #373F34 на #376862 1,73:1 Не проходить
Aa #443F2D на #151614 1,72:1 Не проходить
Aa #49513E на #2F2D22 1,67:1 Не проходить
Aa #373F34 на #151614 1,66:1 Не проходить
Aa #443F2D на #376862 1,66:1 Не проходить
Aa #443F2D на #1C1C17 1,62:1 Не проходить
Aa #151614 на #203F42 1,60:1 Не проходить
Aa #49513E на #19343A 1,59:1 Не проходить
Aa #7D825A на #376862 1,57:1 Не проходить
Aa #373F34 на #1C1C17 1,57:1 Не проходить
Aa #1C1C17 на #203F42 1,51:1 Не проходить
Aa #151614 на #19343A 1,38:1 Не проходить
Aa #49513E на #203F42 1,37:1 Не проходить
Aa #49513E на #373F34 1,32:1 Не проходить
Aa #49513E на #376862 1,31:1 Не проходить
Aa #443F2D на #2F2D22 1,31:1 Не проходить
Aa #2F2D22 на #151614 1,31:1 Не проходить
Aa #1C1C17 на #19343A 1,30:1 Не проходить
Aa #49513E на #443F2D 1,27:1 Не проходить
Aa #373F34 на #2F2D22 1,27:1 Не проходить
Aa #443F2D на #19343A 1,25:1 Не проходить
Aa #2F2D22 на #1C1C17 1,24:1 Не проходить
Aa #2F2D22 на #203F42 1,22:1 Не проходить
Aa #373F34 на #19343A 1,21:1 Не проходить
Aa #203F42 на #19343A 1,16:1 Не проходить
Aa #7D825A на #519585 1,15:1 Не проходить
Aa #443F2D на #203F42 1,08:1 Не проходить
Aa #1C1C17 на #151614 1,06:1 Не проходить
Aa #2F2D22 на #19343A 1,05:1 Не проходить
Aa #373F34 на #443F2D 1,04:1 Не проходить
Aa #373F34 на #203F42 1,04:1 Не проходить

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

#000000 #3D0000 #950101 #FF0000
4 кольори
#E23E57 #88304E #522546 #311D3F
4 кольори
#FF204E #A0153E #5D0E41 #00224D
4 кольори
#030637 #3C0753 #720455 #910A67
4 кольори
#1C0A00 #361500 #603601 #CC9544
4 кольори
#252525 #FF0000 #AF0404 #414141
4 кольори
#362222 #171010 #423F3E #2B2B2B
4 кольори
#1A1A1D #3B1C32 #6A1E55 #A64D79
4 кольори