色名 · #B2CCD9
Arctic Circle
Arctic Circleは#B2CCD9：rgb(178 204 217)、hsl(200 34% 77%)、oklch(0.83 0.033 229.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Arctic Circle color name →
#B2CCD9
oklch(0.83 0.033 229.3)
カラー変換
- HEX
- #b2ccd9
- RGB
- rgb(178 204 217)
- HSL
- hsl(200 34% 77%)
- HWB
- hwb(200 70% 15%)
- OKLCH
- oklch(0.83 0.033 229.3)
- OKLab
- oklab(0.83 -0.022 -0.025)
- CIE Lab
- lab(80.4 -7 -9.58)
- LCH
- lch(80.4 11.87 233.8)
- CMYK
- cmyk(18% 6% 0% 15%)
ティント · シェード · トーン
ティント
- BAD1DD
- C1D6E1
- C9DBE4
- D1E0E8
- D8E5EC
- E0EAF0
- E8F0F4
- EFF5F7
- F7FAFB
シェード
- 9AB1BC
- 8397A1
- 6D7E86
- 57656C
- 434E53
- 2F373B
- 1D2225
- 0C0F11
- 010202
トーン
- ADC4D0
- A8BCC7
- A3B5BD
- 9EADB4
- 99A5AC
- 949EA3
- 8F969A
- 8A8F91
- 858789
カラーハーモニー
補色 +180°
- B2CCD9
Arctic Circle
- DAC2B5
≈ Marshmallow Cocoa
類似色 -30° +30°
- B2CCD9
Arctic Circle
- AFCED0
≈ Dewpoint
- BBC8DE
≈ Penna
トライアド +120° +240°
- B2CCD9
Arctic Circle
- D9BFCB
≈ Twilight Light
- C8CAB1
≈ Whispering Pine
スプリットコンプリメンタリー +150° +210°
- B2CCD9
Arctic Circle
- DCBFBF
≈ Mud Pink
- D3C5B0
≈ Casual Khaki
テトラード +90° +180° +270°
- B2CCD9
Arctic Circle
- D1C1D5
≈ Seedless Grape
- DAC2B5
≈ Marshmallow Cocoa
- BDCDB8
≈ Isle of Dreams
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.67:1 · APCA Lc 30
Ag
AAA黒の上
WCAG 12.53:1 · APCA Lc 73
最適な文字色: #000000
WCAG 12.53:1 (AAA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--arctic-circle: #b2ccd9;
--arctic-circle-rgb: 178 204 217;
--arctic-circle-oklch: oklch(0.83 0.033 229.3);
}
.element {
color: var(--arctic-circle);
background-color: hsl(200 34% 77%);
border-color: oklch(0.83 0.033 229.3);
}Tailwind CSS v4
@theme {
--color-arctic-circle: #b2ccd9;
--color-arctic-circle-50: #ecf7fd;
--color-arctic-circle-100: #ddeaf1;
--color-arctic-circle-200: #c7d7e0;
--color-arctic-circle-300: #a7bbc6;
--color-arctic-circle-400: #8ba3af;
--color-arctic-circle-500: #708b98;
--color-arctic-circle-600: #5f7581;
--color-arctic-circle-700: #4c5e67;
--color-arctic-circle-800: #36454b;
--color-arctic-circle-900: #253034;
--color-arctic-circle-950: #141c20;
}SCSS
$arctic-circle: #b2ccd9;
$arctic-circle-rgb: 178, 204, 217;
$arctic-circle-light: mix(#fff, $arctic-circle, 20%);
$arctic-circle-dark: mix(#000, $arctic-circle, 20%);
.element {
color: $arctic-circle;
box-shadow: 0 0 0 2px rgba($arctic-circle, 0.35);
}