色名 · #087170
Boating Green
Boating Greenは#087170：rgb(8 113 112)、hsl(179 87% 24%)、oklch(0.497 0.083 193.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Boating Green color name →
#087170
oklch(0.497 0.083 193.7)
カラー変換
- HEX
- #087170
- RGB
- rgb(8 113 112)
- HSL
- hsl(179 87% 24%)
- HWB
- hwb(179 3% 56%)
- OKLCH
- oklch(0.497 0.083 193.7)
- OKLab
- oklab(0.497 -0.081 -0.02)
- CIE Lab
- lab(42.57 -27.5 -7.52)
- LCH
- lch(42.57 28.51 195.3)
- CMYK
- cmyk(93% 0% 1% 56%)
ティント · シェード · トーン
ティント
- 317F7D
- 4C8C8B
- 639A99
- 79A8A7
- 90B6B5
- A6C5C3
- BCD3D2
- D2E2E1
- E8F0F0
シェード
- 066160
- 045251
- 034343
- 023535
- 012727
- 011A1A
- 000E0E
- 000404
- 000101
トーン
- 237372
- 337473
- 3F7675
- 4A7876
- 547978
- 5E7B7A
- 677C7B
- 6F7D7D
- 787F7E
カラーハーモニー
補色 +180°
- 087170
Boating Green
- 8B4E54
≈ Roan Rouge
類似色 -30° +30°
- 087170
Boating Green
- 2C7155
≈ Jungle Book Green
- 1C6C85
≈ Saxony Blue
トライアド +120° +240°
- 087170
Boating Green
- 735484
≈ Gutsy Grape
- 7F5B26
≈ Hot Curry
スプリットコンプリメンタリー +150° +210°
- 087170
Boating Green
- 834E6E
≈ Damson
- 8A523A
≈ Rusted Earth
テトラード +90° +180° +270°
- 087170
Boating Green
- 5C5C90
≈ Colossus
- 8B4E54
≈ Roan Rouge
- 6B6426
≈ Greenish Brown
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.82:1 · APCA Lc 79
Ag
Fail黒の上
WCAG 3.60:1 · APCA Lc 23
最適な文字色: #FFFFFF
WCAG 5.82:1 (AA) · APCA Lc 79
Contrast pairs
コードスニペット
CSS
:root {
--boating-green: #087170;
--boating-green-rgb: 8 113 112;
--boating-green-oklch: oklch(0.497 0.083 193.7);
}
.element {
color: var(--boating-green);
background-color: hsl(179 87% 24%);
border-color: oklch(0.497 0.083 193.7);
}Tailwind CSS v4
@theme {
--color-boating-green: #087170;
--color-boating-green-50: #dbfdfd;
--color-boating-green-100: #c9f1f1;
--color-boating-green-200: #abe0e0;
--color-boating-green-300: #84c5c5;
--color-boating-green-400: #5eaeac;
--color-boating-green-500: #319796;
--color-boating-green-600: #2c807f;
--color-boating-green-700: #236765;
--color-boating-green-800: #184b4a;
--color-boating-green-900: #0f3433;
--color-boating-green-950: #02201f;
}SCSS
$boating-green: #087170;
$boating-green-rgb: 8, 113, 112;
$boating-green-light: mix(#fff, $boating-green, 20%);
$boating-green-dark: mix(#000, $boating-green, 20%);
.element {
color: $boating-green;
box-shadow: 0 0 0 2px rgba($boating-green, 0.35);
}