色名 · #574A47
Molasses
Molassesは#574A47：rgb(87 74 71)、hsl(11 10% 31%)、oklch(0.421 0.018 33.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Molasses color name →
#574A47
oklch(0.421 0.018 33.1)
カラー変換
- HEX
- #574a47
- RGB
- rgb(87 74 71)
- HSL
- hsl(11 10% 31%)
- HWB
- hwb(11 28% 66%)
- OKLCH
- oklch(0.421 0.018 33.1)
- OKLab
- oklab(0.421 0.015 0.01)
- CIE Lab
- lab(32.73 5.24 3.93)
- LCH
- lch(32.73 6.55 36.9)
- CMYK
- cmyk(0% 15% 18% 66%)
ティント · シェード · トーン
ティント
- 665A57
- 766B68
- 867C7A
- 978E8C
- A7A09E
- B8B2B1
- CAC5C4
- DBD8D7
- EDEBEB
シェード
- 4B3F3D
- 3E3532
- 332A28
- 27201F
- 1C1716
- 120E0D
- 080606
- 030202
- 000000
トーン
- 5B4F4C
- 5F5452
- 635A58
- 675F5D
- 6B6463
- 6F6A69
- 746F6E
- 787574
- 7C7A7A
カラーハーモニー
補色 +180°
- 574A47
Molasses
- 425053
≈ Lunar Eclipse
類似色 -30° +30°
- 574A47
Molasses
- 57494C
≈ Carob Chip
- 554B43
≈ Brown Fox
トライアド +120° +240°
- 574A47
Molasses
- 465049
≈ Park Avenue
- 4A4D58
≈ Blue Sash
スプリットコンプリメンタリー +150° +210°
- 574A47
Molasses
- 43514E
≈ Black Evergreen
- 454F57
≈ Evening Storm
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 8.48:1 · APCA Lc 89
Ag
Fail黒の上
WCAG 2.47:1 · APCA Lc 13
最適な文字色: #FFFFFF
WCAG 8.48:1 (AAA) · APCA Lc 89
Contrast pairs
コードスニペット
CSS
:root {
--molasses: #574a47;
--molasses-rgb: 87 74 71;
--molasses-oklch: oklch(0.421 0.018 33.1);
}
.element {
color: var(--molasses);
background-color: hsl(11 10% 31%);
border-color: oklch(0.421 0.018 33.1);
}Tailwind CSS v4
@theme {
--color-molasses: #574a47;
--color-molasses-50: #faf3f2;
--color-molasses-100: #eee6e4;
--color-molasses-200: #dcd2cf;
--color-molasses-300: #c0b4b1;
--color-molasses-400: #a99b97;
--color-molasses-500: #92827e;
--color-molasses-600: #7b6e6b;
--color-molasses-700: #635856;
--color-molasses-800: #49403e;
--color-molasses-900: #322c2b;
--color-molasses-950: #1e1918;
}SCSS
$molasses: #574a47;
$molasses-rgb: 87, 74, 71;
$molasses-light: mix(#fff, $molasses, 20%);
$molasses-dark: mix(#000, $molasses, 20%);
.element {
color: $molasses;
box-shadow: 0 0 0 2px rgba($molasses, 0.35);
}