色名 · #C4D1BF
Budding Green
Budding Greenは#C4D1BF：rgb(196 209 191)、hsl(103 16% 78%)、oklch(0.846 0.028 136.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Budding Green color name →
#C4D1BF
oklch(0.846 0.028 136.9)
カラー変換
- HEX
- #c4d1bf
- RGB
- rgb(196 209 191)
- HSL
- hsl(103 16% 78%)
- HWB
- hwb(103 75% 18%)
- OKLCH
- oklch(0.846 0.028 136.9)
- OKLab
- oklab(0.846 -0.021 0.019)
- CIE Lab
- lab(82.46 -7.03 7.37)
- LCH
- lch(82.46 10.19 133.6)
- CMYK
- cmyk(6% 0% 9% 18%)
ティント · シェード · トーン
ティント
- CAD6C5
- D0DACC
- D5DFD2
- DBE3D8
- E1E8DF
- E7ECE5
- EDF1EC
- F3F6F2
- F9FAF8
シェード
- AAB5A6
- 919B8D
- 788175
- 61685E
- 4A5048
- 353933
- 21231F
- 0E100D
- 020202
トーン
- BDC9B9
- B6C0B2
- AFB8AC
- A8B0A5
- A1A89F
- 9BA099
- 949892
- 8D908C
- 878886
カラーハーモニー
補色 +180°
- C4D1BF
Budding Green
- D4C7D9
≈ Modesty
類似色 -30° +30°
- C4D1BF
Budding Green
- CECEB9
≈ Half Moon
- BCD3C8
≈ Sage Bundle
トライアド +120° +240°
- C4D1BF
Budding Green
- C1CDDF
≈ Lilac Bisque
- DEC5C6
≈ Pink Pandora
スプリットコンプリメンタリー +150° +210°
- C4D1BF
Budding Green
- CBCADF
≈ Gregorio Garden
- DBC5D0
≈ Scented Soap
テトラード +90° +180° +270°
- C4D1BF
Budding Green
- BAD1DB
≈ Bahama Breezes
- D4C7D9
≈ Modesty
- DDC7BD
≈ Tender Shell
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.58:1 · APCA Lc 27
Ag
AAA黒の上
WCAG 13.21:1 · APCA Lc 76
最適な文字色: #000000
WCAG 13.21:1 (AAA) · APCA Lc 76
Contrast pairs
コードスニペット
CSS
:root {
--budding-green: #c4d1bf;
--budding-green-rgb: 196 209 191;
--budding-green-oklch: oklch(0.846 0.028 136.9);
}
.element {
color: var(--budding-green);
background-color: hsl(103 16% 78%);
border-color: oklch(0.846 0.028 136.9);
}Tailwind CSS v4
@theme {
--color-budding-green: #c4d1bf;
--color-budding-green-50: #f1f7ef;
--color-budding-green-100: #e3eae1;
--color-budding-green-200: #ced7cc;
--color-budding-green-300: #b0bbad;
--color-budding-green-400: #97a392;
--color-budding-green-500: #7e8b78;
--color-budding-green-600: #6a7566;
--color-budding-green-700: #555e52;
--color-budding-green-800: #3e453b;
--color-budding-green-900: #2b2f28;
--color-budding-green-950: #181c16;
}SCSS
$budding-green: #c4d1bf;
$budding-green-rgb: 196, 209, 191;
$budding-green-light: mix(#fff, $budding-green, 20%);
$budding-green-dark: mix(#000, $budding-green, 20%);
.element {
color: $budding-green;
box-shadow: 0 0 0 2px rgba($budding-green, 0.35);
}