色名 · #BCC2C3
Shallow Skies
Shallow Skiesは#BCC2C3：rgb(188 194 195)、hsl(189 6% 75%)、oklch(0.81 0.007 208.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Shallow Skies color name →
#BCC2C3
oklch(0.81 0.007 208.8)
カラー変換
- HEX
- #bcc2c3
- RGB
- rgb(188 194 195)
- HSL
- hsl(189 6% 75%)
- HWB
- hwb(189 74% 24%)
- OKLCH
- oklch(0.81 0.007 208.8)
- OKLab
- oklab(0.81 -0.006 -0.003)
- CIE Lab
- lab(77.98 -2.01 -1.26)
- LCH
- lch(77.98 2.37 212.2)
- CMYK
- cmyk(4% 1% 0% 24%)
ティント · シェード · トーン
ティント
- C3C8C9
- C9CECF
- D0D4D5
- D6DADB
- DDE0E1
- E4E6E7
- EBECED
- F1F3F3
- F8F9F9
シェード
- A3A8A9
- 8B8F90
- 737778
- 5D6060
- 47494A
- 323434
- 1F2020
- 0D0E0E
- 020202
トーン
- B6BBBC
- B0B4B5
- AAAEAE
- A4A7A8
- 9DA0A1
- 989A9A
- 929394
- 8C8D8D
- 868686
カラーハーモニー
補色 +180°
- BCC2C3
Shallow Skies
- C5BFBE
≈ Modest Silver
類似色 -30° +30°
- BCC2C3
Shallow Skies
- BCC2C1
≈ Polished Rock
- BDC1C5
≈ Lazy Grey
トライアド +120° +240°
- BCC2C3
Shallow Skies
- C3BFC3
≈ Mote of Dust
- C2C1BC
≈ Knitting Needles
スプリットコンプリメンタリー +150° +210°
- BCC2C3
Shallow Skies
- C5BFC1
≈ Easter Rabbit
- C4C0BC
≈ Natural Grey
テトラード +90° +180° +270°
- BCC2C3
Shallow Skies
- C1C0C5
≈ Mote of Dust
- C5BFBE
≈ Modest Silver
- C0C1BD
≈ Bay Waves
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.80:1 · APCA Lc 34
Ag
AAA黒の上
WCAG 11.64:1 · APCA Lc 69
最適な文字色: #000000
WCAG 11.64:1 (AAA) · APCA Lc 69
Contrast pairs
コードスニペット
CSS
:root {
--shallow-skies: #bcc2c3;
--shallow-skies-rgb: 188 194 195;
--shallow-skies-oklch: oklch(0.81 0.007 208.8);
}
.element {
color: var(--shallow-skies);
background-color: hsl(189 6% 75%);
border-color: oklch(0.81 0.007 208.8);
}Tailwind CSS v4
@theme {
--color-shallow-skies: #bcc2c3;
--color-shallow-skies-50: #f3f6f6;
--color-shallow-skies-100: #e5e8e9;
--color-shallow-skies-200: #d1d5d6;
--color-shallow-skies-300: #b4b8b9;
--color-shallow-skies-400: #9aa0a0;
--color-shallow-skies-500: #818788;
--color-shallow-skies-600: #6d7373;
--color-shallow-skies-700: #575c5c;
--color-shallow-skies-800: #404343;
--color-shallow-skies-900: #2c2e2f;
--color-shallow-skies-950: #191b1b;
}SCSS
$shallow-skies: #bcc2c3;
$shallow-skies-rgb: 188, 194, 195;
$shallow-skies-light: mix(#fff, $shallow-skies, 20%);
$shallow-skies-dark: mix(#000, $shallow-skies, 20%);
.element {
color: $shallow-skies;
box-shadow: 0 0 0 2px rgba($shallow-skies, 0.35);
}