色名 · #BCAF9E
Winter Feather
Winter Featherは#BCAF9E：rgb(188 175 158)、hsl(34 18% 68%)、oklch(0.76 0.028 74.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Winter Feather color name →
#BCAF9E
oklch(0.76 0.028 74.7)
カラー変換
- HEX
- #bcaf9e
- RGB
- rgb(188 175 158)
- HSL
- hsl(34 18% 68%)
- HWB
- hwb(34 62% 26%)
- OKLCH
- oklch(0.76 0.028 74.7)
- OKLab
- oklab(0.76 0.007 0.027)
- CIE Lab
- lab(72.22 2.7 10.52)
- LCH
- lch(72.22 10.86 75.6)
- CMYK
- cmyk(0% 7% 16% 26%)
ティント · シェード · トーン
ティント
- C3B7A7
- C9BFB1
- D0C6BA
- D6CEC4
- DDD6CE
- E4DED7
- EBE6E1
- F1EFEB
- F8F7F5
シェード
- A39889
- 8B8174
- 736B60
- 5D564D
- 47413A
- 322E29
- 1F1C18
- 0D0B09
- 020101
トーン
- B6AA9B
- B0A598
- AAA195
- A49C92
- 9E978F
- 98938C
- 928E89
- 8C8986
- 868583
カラーハーモニー
補色 +180°
- BCAF9E
Winter Feather
- A5B2C3
≈ Grey Agate
類似色 -30° +30°
- BCAF9E
Winter Feather
- C1ACA3
≈ Poetry in Motion
- B3B29E
≈ Ballie Scott Sage
トライアド +120° +240°
- BCAF9E
Winter Feather
- 9EB7B6
≈ Renew Blue
- B8ACBE
≈ Lola
スプリットコンプリメンタリー +150° +210°
- BCAF9E
Winter Feather
- 9FB5BF
≈ Faded Flaxflower
- AFAFC3
≈ Noble Purple
テトラード +90° +180° +270°
- BCAF9E
Winter Feather
- A2B7AD
≈ Pistachio Ice Cream
- A5B2C3
≈ Grey Agate
- BFAAB5
≈ Soft Heather
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.15:1 · APCA Lc 42
Ag
AAA黒の上
WCAG 9.76:1 · APCA Lc 60
最適な文字色: #000000
WCAG 9.76:1 (AAA) · APCA Lc 60
Contrast pairs
コードスニペット
CSS
:root {
--winter-feather: #bcaf9e;
--winter-feather-rgb: 188 175 158;
--winter-feather-oklch: oklch(0.76 0.028 74.7);
}
.element {
color: var(--winter-feather);
background-color: hsl(34 18% 68%);
border-color: oklch(0.76 0.028 74.7);
}Tailwind CSS v4
@theme {
--color-winter-feather: #bcaf9e;
--color-winter-feather-50: #faf4ec;
--color-winter-feather-100: #ede7de;
--color-winter-feather-200: #dbd3c7;
--color-winter-feather-300: #c0b6a8;
--color-winter-feather-400: #a89c8d;
--color-winter-feather-500: #918472;
--color-winter-feather-600: #7b7061;
--color-winter-feather-700: #62594d;
--color-winter-feather-800: #484138;
--color-winter-feather-900: #322d26;
--color-winter-feather-950: #1e1a15;
}SCSS
$winter-feather: #bcaf9e;
$winter-feather-rgb: 188, 175, 158;
$winter-feather-light: mix(#fff, $winter-feather, 20%);
$winter-feather-dark: mix(#000, $winter-feather, 20%);
.element {
color: $winter-feather;
box-shadow: 0 0 0 2px rgba($winter-feather, 0.35);
}