色名 · #BAD2B8
Eucalyptus Leaf
Eucalyptus Leafは#BAD2B8：rgb(186 210 184)、hsl(115 22% 77%)、oklch(0.839 0.044 143.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Eucalyptus Leaf color name →
#BAD2B8
oklch(0.839 0.044 143.1)
カラー変換
- HEX
- #bad2b8
- RGB
- rgb(186 210 184)
- HSL
- hsl(115 22% 77%)
- HWB
- hwb(115 72% 18%)
- OKLCH
- oklch(0.839 0.044 143.1)
- OKLab
- oklab(0.839 -0.035 0.026)
- CIE Lab
- lab(81.86 -11.99 10.09)
- LCH
- lch(81.86 15.67 139.9)
- CMYK
- cmyk(11% 0% 12% 18%)
ティント · シェード · トーン
ティント
- C1D6BF
- C8DBC6
- CEDFCD
- D5E4D4
- DCE8DB
- E3EDE2
- EAF1E9
- F1F6F1
- F8FAF8
シェード
- A1B6A0
- 899B88
- 728171
- 5C685B
- 465045
- 323931
- 1E241E
- 0D100C
- 020202
トーン
- B4CAB2
- AEC1AD
- A8B9A7
- A2B0A1
- 9DA89C
- 97A096
- 919891
- 8B908B
- 868885
カラーハーモニー
補色 +180°
- BAD2B8
Eucalyptus Leaf
- D9C1DB
≈ New Violet
類似色 -30° +30°
- BAD2B8
Eucalyptus Leaf
- CACEAD
≈ Bamboo White
- AED4C7
≈ Feeling Lucky
トライアド +120° +240°
- BAD2B8
Eucalyptus Leaf
- BBCBE8
≈ Cuddle
- E6C0BD
≈ Rosy Glow
スプリットコンプリメンタリー +150° +210°
- BAD2B8
Eucalyptus Leaf
- CBC5E5
≈ Purple Purity
- E2BFCC
≈ Soap Pink
テトラード +90° +180° +270°
- BAD2B8
Eucalyptus Leaf
- AFD0E3
≈ Light Sky Bus
- D9C1DB
≈ New Violet
- E2C3B0
≈ Gypsum Rose
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.61:1 · APCA Lc 28
Ag
AAA黒の上
WCAG 12.99:1 · APCA Lc 75
最適な文字色: #000000
WCAG 12.99:1 (AAA) · APCA Lc 75
Contrast pairs
コードスニペット
CSS
:root {
--eucalyptus-leaf: #bad2b8;
--eucalyptus-leaf-rgb: 186 210 184;
--eucalyptus-leaf-oklch: oklch(0.839 0.044 143.1);
}
.element {
color: var(--eucalyptus-leaf);
background-color: hsl(115 22% 77%);
border-color: oklch(0.839 0.044 143.1);
}Tailwind CSS v4
@theme {
--color-eucalyptus-leaf: #bad2b8;
--color-eucalyptus-leaf-50: #eef9ee;
--color-eucalyptus-leaf-100: #dfecdf;
--color-eucalyptus-leaf-200: #c9dac9;
--color-eucalyptus-leaf-300: #aabeaa;
--color-eucalyptus-leaf-400: #90a68e;
--color-eucalyptus-leaf-500: #758e73;
--color-eucalyptus-leaf-600: #647862;
--color-eucalyptus-leaf-700: #4f604e;
--color-eucalyptus-leaf-800: #3a4638;
--color-eucalyptus-leaf-900: #283126;
--color-eucalyptus-leaf-950: #161d15;
}SCSS
$eucalyptus-leaf: #bad2b8;
$eucalyptus-leaf-rgb: 186, 210, 184;
$eucalyptus-leaf-light: mix(#fff, $eucalyptus-leaf, 20%);
$eucalyptus-leaf-dark: mix(#000, $eucalyptus-leaf, 20%);
.element {
color: $eucalyptus-leaf;
box-shadow: 0 0 0 2px rgba($eucalyptus-leaf, 0.35);
}