色名 · #2F4A15
Treetop Cathedral
Treetop Cathedralは#2F4A15：rgb(47 74 21)、hsl(91 56% 19%)、oklch(0.375 0.085 132.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Treetop Cathedral color name →
#2F4A15
oklch(0.375 0.085 132.3)
カラー変換
- HEX
- #2f4a15
- RGB
- rgb(47 74 21)
- HSL
- hsl(91 56% 19%)
- HWB
- hwb(91 8% 71%)
- OKLCH
- oklch(0.375 0.085 132.3)
- OKLab
- oklab(0.375 -0.057 0.063)
- CIE Lab
- lab(28.35 -18.29 27.1)
- LCH
- lch(28.35 32.7 124)
- CMYK
- cmyk(36% 0% 72% 71%)
ティント · シェード · トーン
ティント
- 415B2C
- 546C42
- 687D58
- 7C8F6F
- 91A185
- A6B39D
- BCC5B5
- D2D8CD
- E8ECE6
シェード
- 273F11
- 20350C
- 192A08
- 122005
- 0C1703
- 060E02
- 030601
- 010200
- 000000
トーン
- 374F21
- 3F552D
- 475A37
- 4F6042
- 57654C
- 5F6A56
- 677061
- 6F756B
- 787B75
カラーハーモニー
補色 +180°
- 2F4A15
Treetop Cathedral
- 503261
≈ Royal Crown
類似色 -30° +30°
- 2F4A15
Treetop Cathedral
- 494200
≈ Alligator Gladiator
- 004E33
≈ Troll Green
トライアド +120° +240°
- 2F4A15
Treetop Cathedral
- 1B426D
≈ Aegean Blue
- 662B34
≈ Lovestruck
スプリットコンプリメンタリー +150° +210°
- 2F4A15
Treetop Cathedral
- 3B3A6D
≈ American Blue
- 5F2D4D
≈ Vistoris Lake
テトラード +90° +180° +270°
- 2F4A15
Treetop Cathedral
- 00495B
≈ Sultan’s Silk
- 503261
≈ Royal Crown
- 652F19
≈ Overbaked
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.94:1 · APCA Lc 93
Ag
Fail黒の上
WCAG 2.11:1 · APCA Lc 10
最適な文字色: #FFFFFF
WCAG 9.94:1 (AAA) · APCA Lc 93
Contrast pairs
コードスニペット
CSS
:root {
--treetop-cathedral: #2f4a15;
--treetop-cathedral-rgb: 47 74 21;
--treetop-cathedral-oklch: oklch(0.375 0.085 132.3);
}
.element {
color: var(--treetop-cathedral);
background-color: hsl(91 56% 19%);
border-color: oklch(0.375 0.085 132.3);
}Tailwind CSS v4
@theme {
--color-treetop-cathedral: #2f4a15;
--color-treetop-cathedral-50: #ebfbe3;
--color-treetop-cathedral-100: #dcefd2;
--color-treetop-cathedral-200: #c5ddb8;
--color-treetop-cathedral-300: #a5c295;
--color-treetop-cathedral-400: #8ba975;
--color-treetop-cathedral-500: #719256;
--color-treetop-cathedral-600: #5f7c49;
--color-treetop-cathedral-700: #4c633a;
--color-treetop-cathedral-800: #384828;
--color-treetop-cathedral-900: #27321b;
--color-treetop-cathedral-950: #151e0b;
}SCSS
$treetop-cathedral: #2f4a15;
$treetop-cathedral-rgb: 47, 74, 21;
$treetop-cathedral-light: mix(#fff, $treetop-cathedral, 20%);
$treetop-cathedral-dark: mix(#000, $treetop-cathedral, 20%);
.element {
color: $treetop-cathedral;
box-shadow: 0 0 0 2px rgba($treetop-cathedral, 0.35);
}