色名 · #B5CED5
Elevation
Elevationは#B5CED5：rgb(181 206 213)、hsl(193 28% 77%)、oklch(0.835 0.029 216.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Elevation color name →
#B5CED5
oklch(0.835 0.029 216.4)
カラー変換
- HEX
- #b5ced5
- RGB
- rgb(181 206 213)
- HSL
- hsl(193 28% 77%)
- HWB
- hwb(193 71% 16%)
- OKLCH
- oklch(0.835 0.029 216.4)
- OKLab
- oklab(0.835 -0.023 -0.017)
- CIE Lab
- lab(81.05 -7.62 -6.48)
- LCH
- lch(81.05 10 220.4)
- CMYK
- cmyk(15% 3% 0% 16%)
ティント · シェード · トーン
ティント
- BCD3D9
- C4D8DD
- CBDDE1
- D2E1E6
- DAE6EA
- E1EBEE
- E9F0F2
- F0F5F7
- F8FAFB
シェード
- 9DB3B9
- 86989E
- 6F7F83
- 59666A
- 444E51
- 30383A
- 1D2324
- 0C0F10
- 020202
トーン
- B0C6CC
- AABEC3
- A5B6BB
- A0AEB2
- 9AA6AA
- 959EA1
- 909799
- 8A8F90
- 858888
カラーハーモニー
補色 +180°
- B5CED5
Elevation
- DBC3BC
≈ Thulite Rose
類似色 -30° +30°
- B5CED5
Elevation
- B5CFCC
≈ Turquoise Grey
- BACBDB
≈ Arctic Grey
トライアド +120° +240°
- B5CED5
Elevation
- D6C2D0
≈ Chinaberry Bloom
- CEC9B5
≈ Coliseum Marble
スプリットコンプリメンタリー +150° +210°
- B5CED5
Elevation
- DAC2C6
≈ Mud Pink
- D6C6B6
≈ Cafe Latte
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.64:1 · APCA Lc 29
Ag
AAA黒の上
WCAG 12.75:1 · APCA Lc 74
最適な文字色: #000000
WCAG 12.75:1 (AAA) · APCA Lc 74
Contrast pairs
コードスニペット
CSS
:root {
--elevation: #b5ced5;
--elevation-rgb: 181 206 213;
--elevation-oklch: oklch(0.835 0.029 216.4);
}
.element {
color: var(--elevation);
background-color: hsl(193 28% 77%);
border-color: oklch(0.835 0.029 216.4);
}Tailwind CSS v4
@theme {
--color-elevation: #b5ced5;
--color-elevation-50: #edf7fb;
--color-elevation-100: #deeaee;
--color-elevation-200: #c7d7dc;
--color-elevation-300: #a8bbc1;
--color-elevation-400: #8ca3a9;
--color-elevation-500: #718b92;
--color-elevation-600: #60767c;
--color-elevation-700: #4d5e63;
--color-elevation-800: #374548;
--color-elevation-900: #263032;
--color-elevation-950: #141c1e;
}SCSS
$elevation: #b5ced5;
$elevation-rgb: 181, 206, 213;
$elevation-light: mix(#fff, $elevation, 20%);
$elevation-dark: mix(#000, $elevation, 20%);
.element {
color: $elevation;
box-shadow: 0 0 0 2px rgba($elevation, 0.35);
}