色名 · #CDD2DE
Gentle Blue
Gentle Blueは#CDD2DE：rgb(205 210 222)、hsl(222 20% 84%)、oklch(0.864 0.017 267.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Gentle Blue color name →
#CDD2DE
oklch(0.864 0.017 267.8)
カラー変換
- HEX
- #cdd2de
- RGB
- rgb(205 210 222)
- HSL
- hsl(222 20% 84%)
- HWB
- hwb(222 80% 13%)
- OKLCH
- oklch(0.864 0.017 267.8)
- OKLab
- oklab(0.864 -0.001 -0.017)
- CIE Lab
- lab(84.08 -0.06 -6.57)
- LCH
- lch(84.08 6.57 269.5)
- CMYK
- cmyk(8% 5% 0% 13%)
ティント · シェード · トーン
ティント
- D2D6E1
- D7DBE5
- DCDFE8
- E1E4EB
- E6E8EE
- EBEDF2
- F0F1F5
- F5F6F8
- FAFAFC
シェード
- B2B6C1
- 989BA5
- 7E8189
- 66686F
- 4E5055
- 38393D
- 232426
- 0F1012
- 020202
トーン
- C5C9D4
- BDC1CA
- B5B9C1
- ADB0B7
- A6A8AE
- 9EA0A4
- 96989B
- 8F9092
- 878889
カラーハーモニー
補色 +180°
- CDD2DE
Gentle Blue
- D7D2C6
≈ Winter in New York
類似色 -30° +30°
- CDD2DE
Gentle Blue
- C8D4DC
≈ Nearsighted
- D3D0DC
≈ Lavender Haze
トライアド +120° +240°
- CDD2DE
Gentle Blue
- DDCECC
≈ Light Hint of Lavender
- CBD5CC
≈ Celadon Glaze
スプリットコンプリメンタリー +150° +210°
- CDD2DE
Gentle Blue
- DBD0C7
≈ Jodhpur Tan
- D1D4C7
≈ Filmy Green
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.51:1 · APCA Lc 24
Ag
AAA黒の上
WCAG 13.86:1 · APCA Lc 79
最適な文字色: #000000
WCAG 13.86:1 (AAA) · APCA Lc 79
Contrast pairs
コードスニペット
CSS
:root {
--gentle-blue: #cdd2de;
--gentle-blue-rgb: 205 210 222;
--gentle-blue-oklch: oklch(0.864 0.017 267.8);
}
.element {
color: var(--gentle-blue);
background-color: hsl(222 20% 84%);
border-color: oklch(0.864 0.017 267.8);
}Tailwind CSS v4
@theme {
--color-gentle-blue: #cdd2de;
--color-gentle-blue-50: #f3f5fa;
--color-gentle-blue-100: #e5e8ee;
--color-gentle-blue-200: #d1d4dc;
--color-gentle-blue-300: #b4b7c1;
--color-gentle-blue-400: #9a9ea9;
--color-gentle-blue-500: #818692;
--color-gentle-blue-600: #6d717c;
--color-gentle-blue-700: #575b63;
--color-gentle-blue-800: #3f4249;
--color-gentle-blue-900: #2c2e32;
--color-gentle-blue-950: #191b1e;
}SCSS
$gentle-blue: #cdd2de;
$gentle-blue-rgb: 205, 210, 222;
$gentle-blue-light: mix(#fff, $gentle-blue, 20%);
$gentle-blue-dark: mix(#000, $gentle-blue, 20%);
.element {
color: $gentle-blue;
box-shadow: 0 0 0 2px rgba($gentle-blue, 0.35);
}