色名 · #304B4A
Tree Bark Green
Tree Bark Greenは#304B4A：rgb(48 75 74)、hsl(178 22% 24%)、oklch(0.391 0.033 193)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Tree Bark Green color name →
#304B4A
oklch(0.391 0.033 193)
カラー変換
- HEX
- #304b4a
- RGB
- rgb(48 75 74)
- HSL
- hsl(178 22% 24%)
- HWB
- hwb(178 19% 71%)
- OKLCH
- oklch(0.391 0.033 193)
- OKLab
- oklab(0.391 -0.032 -0.007)
- CIE Lab
- lab(29.71 -10.82 -2.85)
- LCH
- lch(29.71 11.19 194.7)
- CMYK
- cmyk(36% 0% 1% 71%)
ティント · シェード · トーン
ティント
- 435B5A
- 566C6B
- 697D7C
- 7E8F8E
- 92A0A0
- A7B3B2
- BCC5C5
- D2D8D8
- E8EBEB
シェード
- 28403F
- 213535
- 1A2B2A
- 132120
- 0C1717
- 060E0E
- 030606
- 010202
- 000000
トーン
- 38504F
- 405554
- 485B5A
- 50605F
- 586564
- 606A6A
- 68706F
- 707575
- 787B7A
カラーハーモニー
補色 +180°
- 304B4A
Tree Bark Green
- 553E40
≈ Royal Iris
類似色 -30° +30°
- 304B4A
Tree Bark Green
- 354B40
≈ Garnet Black Green
- 324952
≈ Sea Kelp
トライアド +120° +240°
- 304B4A
Tree Bark Green
- 4B4052
≈ Stone Violet
- 504332
≈ Old Treasure Chest
スプリットコンプリメンタリー +150° +210°
- 304B4A
Tree Bark Green
- 523E4A
≈ Purple Province
- 554037
≈ Roasted Kona
テトラード +90° +180° +270°
- 304B4A
Tree Bark Green
- 424357
≈ Dark Renaissance
- 553E40
≈ Royal Iris
- 484632
≈ Limonite Brown
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.41:1 · APCA Lc 92
Ag
Fail黒の上
WCAG 2.23:1 · APCA Lc 11
最適な文字色: #FFFFFF
WCAG 9.41:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--tree-bark-green: #304b4a;
--tree-bark-green-rgb: 48 75 74;
--tree-bark-green-oklch: oklch(0.391 0.033 193);
}
.element {
color: var(--tree-bark-green);
background-color: hsl(178 22% 24%);
border-color: oklch(0.391 0.033 193);
}Tailwind CSS v4
@theme {
--color-tree-bark-green: #304b4a;
--color-tree-bark-green-50: #ebf8f8;
--color-tree-bark-green-100: #dceceb;
--color-tree-bark-green-200: #c5d9d8;
--color-tree-bark-green-300: #a5bdbc;
--color-tree-bark-green-400: #89a5a4;
--color-tree-bark-green-500: #6d8d8c;
--color-tree-bark-green-600: #5d7876;
--color-tree-bark-green-700: #4a605f;
--color-tree-bark-green-800: #364645;
--color-tree-bark-green-900: #253130;
--color-tree-bark-green-950: #131d1c;
}SCSS
$tree-bark-green: #304b4a;
$tree-bark-green-rgb: 48, 75, 74;
$tree-bark-green-light: mix(#fff, $tree-bark-green, 20%);
$tree-bark-green-dark: mix(#000, $tree-bark-green, 20%);
.element {
color: $tree-bark-green;
box-shadow: 0 0 0 2px rgba($tree-bark-green, 0.35);
}