色名 · #C4DBCB
Clearly Aqua
Clearly Aquaは#C4DBCB：rgb(196 219 203)、hsl(138 24% 81%)、oklch(0.87 0.033 155.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Clearly Aqua color name →
#C4DBCB
oklch(0.87 0.033 155.3)
カラー変換
- HEX
- #c4dbcb
- RGB
- rgb(196 219 203)
- HSL
- hsl(138 24% 81%)
- HWB
- hwb(138 77% 14%)
- OKLCH
- oklch(0.87 0.033 155.3)
- OKLab
- oklab(0.87 -0.03 0.014)
- CIE Lab
- lab(85.34 -10.21 5.16)
- LCH
- lch(85.34 11.44 153.2)
- CMYK
- cmyk(11% 0% 7% 14%)
ティント · シェード · トーン
ティント
- CADFD0
- D0E2D5
- D6E6DA
- DBE9E0
- E1EDE5
- E7F1EA
- EDF4EF
- F3F8F4
- F9FBFA
シェード
- AABEB0
- 91A296
- 78877D
- 616D65
- 4A544D
- 353C37
- 212622
- 0E110F
- 020202
トーン
- BDD2C3
- B6C8BC
- AFBFB4
- A8B6AC
- A1ACA5
- 9BA39D
- 949A96
- 8D918F
- 878987
カラーハーモニー
補色 +180°
- C4DBCB
Clearly Aqua
- E3CCDD
≈ Naughty Marietta
類似色 -30° +30°
- C4DBCB
Clearly Aqua
- CFD8C1
≈ Turtle Chalk
- BDDCD7
≈ Meander Blue
トライアド +120° +240°
- C4DBCB
Clearly Aqua
- CED3EA
≈ Artistic Violet
- E9CDC6
≈ Mosaic Pink
スプリットコンプリメンタリー +150° +210°
- C4DBCB
Clearly Aqua
- D9CFE6
≈ Plum’s the Word
- E8CCD1
≈ Cool Pink
テトラード +90° +180° +270°
- C4DBCB
Clearly Aqua
- C3D7E9
≈ Touch of Blue
- E3CCDD
≈ Naughty Marietta
- E4D0BE
≈ Ice Cream Cone
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.46:1 · APCA Lc 22
Ag
AAA黒の上
WCAG 14.34:1 · APCA Lc 81
最適な文字色: #000000
WCAG 14.34:1 (AAA) · APCA Lc 81
Contrast pairs
コードスニペット
CSS
:root {
--clearly-aqua: #c4dbcb;
--clearly-aqua-rgb: 196 219 203;
--clearly-aqua-oklch: oklch(0.87 0.033 155.3);
}
.element {
color: var(--clearly-aqua);
background-color: hsl(138 24% 81%);
border-color: oklch(0.87 0.033 155.3);
}Tailwind CSS v4
@theme {
--color-clearly-aqua: #c4dbcb;
--color-clearly-aqua-50: #eef8f1;
--color-clearly-aqua-100: #dfebe4;
--color-clearly-aqua-200: #c9d9cf;
--color-clearly-aqua-300: #aabdb1;
--color-clearly-aqua-400: #90a596;
--color-clearly-aqua-500: #758d7d;
--color-clearly-aqua-600: #64776a;
--color-clearly-aqua-700: #4f5f54;
--color-clearly-aqua-800: #3a463d;
--color-clearly-aqua-900: #28302a;
--color-clearly-aqua-950: #161d18;
}SCSS
$clearly-aqua: #c4dbcb;
$clearly-aqua-rgb: 196, 219, 203;
$clearly-aqua-light: mix(#fff, $clearly-aqua, 20%);
$clearly-aqua-dark: mix(#000, $clearly-aqua, 20%);
.element {
color: $clearly-aqua;
box-shadow: 0 0 0 2px rgba($clearly-aqua, 0.35);
}