色名 · #555B53
Midnight Spruce
Midnight Spruceは#555B53：rgb(85 91 83)、hsl(105 5% 34%)、oklch(0.463 0.015 137.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Midnight Spruce color name →
#555B53
oklch(0.463 0.015 137.8)
カラー変換
- HEX
- #555b53
- RGB
- rgb(85 91 83)
- HSL
- hsl(105 5% 34%)
- HWB
- hwb(105 33% 64%)
- OKLCH
- oklch(0.463 0.015 137.8)
- OKLab
- oklab(0.463 -0.011 0.01)
- CIE Lab
- lab(37.92 -3.73 3.78)
- LCH
- lch(37.92 5.3 134.6)
- CMYK
- cmyk(7% 0% 9% 64%)
ティント · シェード · トーン
ティント
- 646A63
- 747973
- 848983
- 959994
- A6A9A5
- B7BAB6
- C9CBC8
- DBDCDA
- EDEDEC
シェード
- 494E47
- 3D413B
- 313530
- 262925
- 1C1E1B
- 111311
- 080908
- 020302
- 000000
トーン
- 595F57
- 5D625C
- 626660
- 666A65
- 6A6D69
- 6E716E
- 737572
- 777877
- 7C7C7B
カラーハーモニー
補色 +180°
- 555B53
Midnight Spruce
- 5C565E
≈ Rabbit
類似色 -30° +30°
- 555B53
Midnight Spruce
- 595A50
≈ Osiris
- 515C57
≈ Evergreen Bough
トライアド +120° +240°
- 555B53
Midnight Spruce
- 545961
≈ Blued Steel
- 615656
≈ Rix
スプリットコンプリメンタリー +150° +210°
- 555B53
Midnight Spruce
- 585861
≈ Midnight Badger
- 60565A
≈ Rabbit
テトラード +90° +180° +270°
- 555B53
Midnight Spruce
- 515B60
≈ Novelty Navy
- 5C565E
≈ Rabbit
- 605752
≈ Pure Zeal
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.98:1 · APCA Lc 84
Ag
Fail黒の上
WCAG 3.00:1 · APCA Lc 18
最適な文字色: #FFFFFF
WCAG 6.98:1 (AA) · APCA Lc 84
Contrast pairs
コードスニペット
CSS
:root {
--midnight-spruce: #555b53;
--midnight-spruce-rgb: 85 91 83;
--midnight-spruce-oklch: oklch(0.463 0.015 137.8);
}
.element {
color: var(--midnight-spruce);
background-color: hsl(105 5% 34%);
border-color: oklch(0.463 0.015 137.8);
}Tailwind CSS v4
@theme {
--color-midnight-spruce: #555b53;
--color-midnight-spruce-50: #f3f6f2;
--color-midnight-spruce-100: #e5e9e4;
--color-midnight-spruce-200: #d1d6d0;
--color-midnight-spruce-300: #b4b9b2;
--color-midnight-spruce-400: #9aa198;
--color-midnight-spruce-500: #82897f;
--color-midnight-spruce-600: #6e746c;
--color-midnight-spruce-700: #585c56;
--color-midnight-spruce-800: #40443f;
--color-midnight-spruce-900: #2c2f2b;
--color-midnight-spruce-950: #191b18;
}SCSS
$midnight-spruce: #555b53;
$midnight-spruce-rgb: 85, 91, 83;
$midnight-spruce-light: mix(#fff, $midnight-spruce, 20%);
$midnight-spruce-dark: mix(#000, $midnight-spruce, 20%);
.element {
color: $midnight-spruce;
box-shadow: 0 0 0 2px rgba($midnight-spruce, 0.35);
}