色名 · #BCBCAE
Soft Sage
Soft Sageは#BCBCAE：rgb(188 188 174)、hsl(60 9% 71%)、oklch(0.791 0.019 106.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Soft Sage color name →
#BCBCAE
oklch(0.791 0.019 106.8)
カラー変換
- HEX
- #bcbcae
- RGB
- rgb(188 188 174)
- HSL
- hsl(60 9% 71%)
- HWB
- hwb(60 68% 26%)
- OKLCH
- oklch(0.791 0.019 106.8)
- OKLab
- oklab(0.791 -0.006 0.019)
- CIE Lab
- lab(75.95 -1.86 7.11)
- LCH
- lch(75.95 7.35 104.7)
- CMYK
- cmyk(0% 0% 7% 26%)
ティント · シェード · トーン
ティント
- C3C3B6
- C9C9BE
- D0D0C6
- D6D6CE
- DDDDD6
- E4E4DE
- EAEBE6
- F1F1EE
- F8F8F7
シェード
- A3A397
- 8B8B80
- 73736A
- 5D5D55
- 474741
- 32322E
- 1F1F1C
- 0D0D0B
- 020201
トーン
- B6B6A9
- B0B0A5
- AAAAA0
- A3A49B
- 9D9D97
- 979892
- 92928E
- 8C8C89
- 868685
カラーハーモニー
補色 +180°
- BCBCAE
Soft Sage
- BAB9C7
≈ Cosmic
類似色 -30° +30°
- BCBCAE
Soft Sage
- C2BAAE
≈ Luxe Grey
- B5BEB2
≈ Irish Moor
トライアド +120° +240°
- BCBCAE
Soft Sage
- AFBEC5
≈ Ocean Drive
- C5B6BD
≈ Lavender Sand
スプリットコンプリメンタリー +150° +210°
- BCBCAE
Soft Sage
- B3BCC8
≈ Blunt
- C0B7C3
≈ Pocketful of Posies
テトラード +90° +180° +270°
- BCBCAE
Soft Sage
- ADBFBF
≈ Greenwich Village
- BAB9C7
≈ Cosmic
- C7B6B6
≈ Grey Rose
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.91:1 · APCA Lc 37
Ag
AAA黒の上
WCAG 10.94:1 · APCA Lc 66
最適な文字色: #000000
WCAG 10.94:1 (AAA) · APCA Lc 66
Contrast pairs
コードスニペット
CSS
:root {
--soft-sage: #bcbcae;
--soft-sage-rgb: 188 188 174;
--soft-sage-oklch: oklch(0.791 0.019 106.8);
}
.element {
color: var(--soft-sage);
background-color: hsl(60 9% 71%);
border-color: oklch(0.791 0.019 106.8);
}Tailwind CSS v4
@theme {
--color-soft-sage: #bcbcae;
--color-soft-sage-50: #f5f6ef;
--color-soft-sage-100: #e8e8e1;
--color-soft-sage-200: #d5d5cc;
--color-soft-sage-300: #b8b8ad;
--color-soft-sage-400: #9f9f92;
--color-soft-sage-500: #878779;
--color-soft-sage-600: #727266;
--color-soft-sage-700: #5c5c52;
--color-soft-sage-800: #43433b;
--color-soft-sage-900: #2e2e29;
--color-soft-sage-950: #1b1b16;
}SCSS
$soft-sage: #bcbcae;
$soft-sage-rgb: 188, 188, 174;
$soft-sage-light: mix(#fff, $soft-sage, 20%);
$soft-sage-dark: mix(#000, $soft-sage, 20%);
.element {
color: $soft-sage;
box-shadow: 0 0 0 2px rgba($soft-sage, 0.35);
}