色名 · #BECFCD
Babbling Brook
Babbling Brookは#BECFCD：rgb(190 207 205)、hsl(173 15% 78%)、oklch(0.841 0.019 188.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Babbling Brook color name →
#BECFCD
oklch(0.841 0.019 188.3)
カラー変換
- HEX
- #becfcd
- RGB
- rgb(190 207 205)
- HSL
- hsl(173 15% 78%)
- HWB
- hwb(173 75% 19%)
- OKLCH
- oklch(0.841 0.019 188.3)
- OKLab
- oklab(0.841 -0.018 -0.003)
- CIE Lab
- lab(81.78 -6.25 -1.08)
- LCH
- lch(81.78 6.34 189.8)
- CMYK
- cmyk(8% 0% 1% 19%)
ティント · シェード · トーン
ティント
- C4D4D2
- CBD8D7
- D1DDDC
- D8E2E1
- DEE7E6
- E5ECEB
- EBF0F0
- F2F5F5
- F8FAFA
シェード
- A5B4B2
- 8C9998
- 757F7E
- 5E6766
- 484F4E
- 333838
- 1F2323
- 0D100F
- 020202
トーン
- B8C7C5
- B1BFBD
- ABB7B5
- A5AFAD
- 9FA7A6
- 989F9E
- 929796
- 8C8F8F
- 868887
カラーハーモニー
補色 +180°
- BECFCD
Babbling Brook
- D7C6C8
≈ Odyssey Lilac
類似色 -30° +30°
- BECFCD
Babbling Brook
- C1CFC6
≈ Azul Tequila
- BECED3
≈ Shhh…
トライアド +120° +240°
- BECFCD
Babbling Brook
- CEC8D4
≈ Chrome Chalice
- D3C9BE
≈ Realist Beige
スプリットコンプリメンタリー +150° +210°
- BECFCD
Babbling Brook
- D4C6CF
≈ Odyssey Lilac
- D6C7C2
≈ Ancestral Haze
テトラード +90° +180° +270°
- BECFCD
Babbling Brook
- C8CAD7
≈ Daybreak Beckons
- D7C6C8
≈ Odyssey Lilac
- CECBBE
≈ Useful Beige
コントラストとアクセシビリティ
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 {
--babbling-brook: #becfcd;
--babbling-brook-rgb: 190 207 205;
--babbling-brook-oklch: oklch(0.841 0.019 188.3);
}
.element {
color: var(--babbling-brook);
background-color: hsl(173 15% 78%);
border-color: oklch(0.841 0.019 188.3);
}Tailwind CSS v4
@theme {
--color-babbling-brook: #becfcd;
--color-babbling-brook-50: #eff7f6;
--color-babbling-brook-100: #e1eae9;
--color-babbling-brook-200: #ccd7d6;
--color-babbling-brook-300: #adbbb9;
--color-babbling-brook-400: #93a2a0;
--color-babbling-brook-500: #798a88;
--color-babbling-brook-600: #667573;
--color-babbling-brook-700: #525e5c;
--color-babbling-brook-800: #3b4543;
--color-babbling-brook-900: #292f2e;
--color-babbling-brook-950: #171c1b;
}SCSS
$babbling-brook: #becfcd;
$babbling-brook-rgb: 190, 207, 205;
$babbling-brook-light: mix(#fff, $babbling-brook, 20%);
$babbling-brook-dark: mix(#000, $babbling-brook, 20%);
.element {
color: $babbling-brook;
box-shadow: 0 0 0 2px rgba($babbling-brook, 0.35);
}