色名 · #CAE0DF
Thin Heights
Thin Heightsは#CAE0DF：rgb(202 224 223)、hsl(177 26% 84%)、oklch(0.89 0.023 193.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Thin Heights color name →
#CAE0DF
oklch(0.89 0.023 193.4)
カラー変換
- HEX
- #cae0df
- RGB
- rgb(202 224 223)
- HSL
- hsl(177 26% 84%)
- HWB
- hwb(177 79% 12%)
- OKLCH
- oklch(0.89 0.023 193.4)
- OKLab
- oklab(0.89 -0.023 -0.005)
- CIE Lab
- lab(87.51 -7.71 -2.13)
- LCH
- lch(87.51 8 195.5)
- CMYK
- cmyk(10% 0% 0% 12%)
ティント · シェード · トーン
ティント
- CFE3E2
- D5E6E5
- DAE9E9
- DFECEC
- E4EFEF
- EAF3F2
- EFF6F5
- F4F9F9
- FAFCFC
シェード
- AFC3C2
- 95A6A5
- 7C8A8A
- 64706F
- 4D5656
- 373E3D
- 222727
- 0F1212
- 020202
トーン
- C2D6D5
- BBCCCB
- B3C2C2
- ACB8B8
- A4AFAE
- 9DA5A5
- 969C9B
- 8E9292
- 878989
カラーハーモニー
補色 +180°
- CAE0DF
Thin Heights
- EAD5D6
≈ Demure
類似色 -30° +30°
- CAE0DF
Thin Heights
- CEE0D6
≈ Light Soft Fresco
- CBDFE6
≈ Bird Bath Blue
トライアド +120° +240°
- CAE0DF
Thin Heights
- E0D7E6
≈ Lavender Vista
- E4D9CA
≈ Riviera Dune
スプリットコンプリメンタリー +150° +210°
- CAE0DF
Thin Heights
- E7D5DF
≈ Swiss Rose
- E9D6CF
≈ Coral Cream
テトラード +90° +180° +270°
- CAE0DF
Thin Heights
- D8D9EA
≈ Eyeshadow
- EAD5D6
≈ Demure
- DDDCCA
≈ Desert Springs
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.37:1 · APCA Lc 18
Ag
AAA黒の上
WCAG 15.23:1 · APCA Lc 85
最適な文字色: #000000
WCAG 15.23:1 (AAA) · APCA Lc 85
Contrast pairs
コードスニペット
CSS
:root {
--thin-heights: #cae0df;
--thin-heights-rgb: 202 224 223;
--thin-heights-oklch: oklch(0.89 0.023 193.4);
}
.element {
color: var(--thin-heights);
background-color: hsl(177 26% 84%);
border-color: oklch(0.89 0.023 193.4);
}Tailwind CSS v4
@theme {
--color-thin-heights: #cae0df;
--color-thin-heights-50: #eef7f7;
--color-thin-heights-100: #dfeaea;
--color-thin-heights-200: #c9d8d7;
--color-thin-heights-300: #aabbbb;
--color-thin-heights-400: #8fa3a2;
--color-thin-heights-500: #758b8a;
--color-thin-heights-600: #637675;
--color-thin-heights-700: #4f5e5e;
--color-thin-heights-800: #394544;
--color-thin-heights-900: #27302f;
--color-thin-heights-950: #151c1c;
}SCSS
$thin-heights: #cae0df;
$thin-heights-rgb: 202, 224, 223;
$thin-heights-light: mix(#fff, $thin-heights, 20%);
$thin-heights-dark: mix(#000, $thin-heights, 20%);
.element {
color: $thin-heights;
box-shadow: 0 0 0 2px rgba($thin-heights, 0.35);
}