色名 · #BBBCA7
Softened Green
Softened Greenは#BBBCA7：rgb(187 188 167)、hsl(63 14% 70%)、oklch(0.789 0.029 109.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Softened Green color name →
#BBBCA7
oklch(0.789 0.029 109.3)
カラー変換
- HEX
- #bbbca7
- RGB
- rgb(187 188 167)
- HSL
- hsl(63 14% 70%)
- HWB
- hwb(63 65% 26%)
- OKLCH
- oklch(0.789 0.029 109.3)
- OKLab
- oklab(0.789 -0.01 0.027)
- CIE Lab
- lab(75.73 -3.11 10.55)
- LCH
- lch(75.73 11 106.4)
- CMYK
- cmyk(1% 0% 11% 26%)
ティント · シェード · トーン
ティント
- C2C3B0
- C8C9B8
- CFD0C1
- D6D6CA
- DCDDD2
- E3E4DB
- EAEBE4
- F1F1ED
- F8F8F6
シェード
- A2A391
- 8A8B7B
- 737366
- 5C5D52
- 46473E
- 32322C
- 1F1F1A
- 0D0D0A
- 020201
トーン
- B5B6A3
- AFB09F
- A9AA9B
- A3A497
- 9D9E93
- 979890
- 91928C
- 8B8C88
- 868684
カラーハーモニー
補色 +180°
- BBBCA7
Softened Green
- B9B7CC
≈ Axis
類似色 -30° +30°
- BBBCA7
Softened Green
- C4B8A6
≈ Loggia
- B1BFAD
≈ Flagstaff Green
トライアド +120° +240°
- BBBCA7
Softened Green
- A8BEC9
≈ Juliet Blue
- C9B3BD
≈ Masked Mauve
スプリットコンプリメンタリー +150° +210°
- BBBCA7
Softened Green
- AFBBCD
≈ Heritage
- C3B5C6
≈ Pink Bravado
テトラード +90° +180° +270°
- BBBCA7
Softened Green
- A6C0C1
≈ Wild Life
- B9B7CC
≈ Axis
- CCB3B3
≈ Puka Shell
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.93:1 · APCA Lc 37
Ag
AAA黒の上
WCAG 10.86:1 · APCA Lc 65
最適な文字色: #000000
WCAG 10.86:1 (AAA) · APCA Lc 65
Contrast pairs
コードスニペット
CSS
:root {
--softened-green: #bbbca7;
--softened-green-rgb: 187 188 167;
--softened-green-oklch: oklch(0.789 0.029 109.3);
}
.element {
color: var(--softened-green);
background-color: hsl(63 14% 70%);
border-color: oklch(0.789 0.029 109.3);
}Tailwind CSS v4
@theme {
--color-softened-green: #bbbca7;
--color-softened-green-50: #f5f6ed;
--color-softened-green-100: #e8e9de;
--color-softened-green-200: #d4d6c8;
--color-softened-green-300: #b7b9a8;
--color-softened-green-400: #9fa08d;
--color-softened-green-500: #878872;
--color-softened-green-600: #727361;
--color-softened-green-700: #5b5c4d;
--color-softened-green-800: #434338;
--color-softened-green-900: #2e2e26;
--color-softened-green-950: #1b1b15;
}SCSS
$softened-green: #bbbca7;
$softened-green-rgb: 187, 188, 167;
$softened-green-light: mix(#fff, $softened-green, 20%);
$softened-green-dark: mix(#000, $softened-green, 20%);
.element {
color: $softened-green;
box-shadow: 0 0 0 2px rgba($softened-green, 0.35);
}