色名 · #ABD5DC
Light Bathing
Light Bathingは#ABD5DC：rgb(171 213 220)、hsl(189 41% 77%)、oklch(0.845 0.045 208.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Light Bathing color name →
#ABD5DC
oklch(0.845 0.045 208.8)
カラー変換
- HEX
- #abd5dc
- RGB
- rgb(171 213 220)
- HSL
- hsl(189 41% 77%)
- HWB
- hwb(189 67% 14%)
- OKLCH
- oklch(0.845 0.045 208.8)
- OKLab
- oklab(0.845 -0.039 -0.022)
- CIE Lab
- lab(82.43 -13.1 -8.26)
- LCH
- lch(82.43 15.49 212.2)
- CMYK
- cmyk(22% 3% 0% 14%)
ティント · シェード · トーン
ティント
- B4D9DF
- BCDDE3
- C4E2E6
- CDE6EA
- D5EAED
- DEEEF1
- E6F2F4
- EEF7F8
- F7FBFB
シェード
- 94B9BF
- 7E9EA3
- 688388
- 546A6E
- 405154
- 2D3A3C
- 1B2426
- 0B1011
- 010202
トーン
- A7CCD2
- A3C3C9
- 9EBBC0
- 9AB2B6
- 96AAAD
- 92A1A4
- 8D999B
- 899092
- 848889
カラーハーモニー
補色 +180°
- ABD5DC
Light Bathing
- E8C2BC
≈ Congo
類似色 -30° +30°
- ABD5DC
Light Bathing
- AED6CD
≈ Gemini
- B2D1E7
≈ Chapel Blue
トライアド +120° +240°
- ABD5DC
Light Bathing
- DDC2DB
≈ Plum Taffy
- D8CBAB
≈ Dance With the Wind
スプリットコンプリメンタリー +150° +210°
- ABD5DC
Light Bathing
- E6C1CC
≈ Primrose Pink
- E3C6B0
≈ Cockleshell
テトラード +90° +180° +270°
- ABD5DC
Light Bathing
- D0C6E6
≈ Italian Fitch
- E8C2BC
≈ Congo
- C9D1B0
≈ Meadow Glen
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.58:1 · APCA Lc 26
Ag
AAA黒の上
WCAG 13.28:1 · APCA Lc 77
最適な文字色: #000000
WCAG 13.28:1 (AAA) · APCA Lc 77
Contrast pairs
コードスニペット
CSS
:root {
--light-bathing: #abd5dc;
--light-bathing-rgb: 171 213 220;
--light-bathing-oklch: oklch(0.845 0.045 208.8);
}
.element {
color: var(--light-bathing);
background-color: hsl(189 41% 77%);
border-color: oklch(0.845 0.045 208.8);
}Tailwind CSS v4
@theme {
--color-light-bathing: #abd5dc;
--color-light-bathing-50: #e7f9fc;
--color-light-bathing-100: #d8ecf0;
--color-light-bathing-200: #bfdadf;
--color-light-bathing-300: #9ebec4;
--color-light-bathing-400: #80a6ad;
--color-light-bathing-500: #628f96;
--color-light-bathing-600: #54797f;
--color-light-bathing-700: #436166;
--color-light-bathing-800: #30474a;
--color-light-bathing-900: #203133;
--color-light-bathing-950: #101d1f;
}SCSS
$light-bathing: #abd5dc;
$light-bathing-rgb: 171, 213, 220;
$light-bathing-light: mix(#fff, $light-bathing, 20%);
$light-bathing-dark: mix(#000, $light-bathing, 20%);
.element {
color: $light-bathing;
box-shadow: 0 0 0 2px rgba($light-bathing, 0.35);
}