色名 · #A7D8DE
Crystal
Crystalは#A7D8DE：rgb(167 216 222)、hsl(187 45% 76%)、oklch(0.85 0.051 205.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Crystal color name →
#A7D8DE
oklch(0.85 0.051 205.5)
カラー変換
- HEX
- #a7d8de
- RGB
- rgb(167 216 222)
- HSL
- hsl(187 45% 76%)
- HWB
- hwb(187 65% 13%)
- OKLCH
- oklch(0.85 0.051 205.5)
- OKLab
- oklab(0.85 -0.046 -0.022)
- CIE Lab
- lab(83.05 -15.44 -8.44)
- LCH
- lch(83.05 17.6 208.7)
- CMYK
- cmyk(25% 3% 0% 13%)
ティント · シェード · トーン
ティント
- B0DCE1
- B9E0E5
- C2E4E8
- CBE8EB
- D3ECEE
- DCEFF2
- E5F3F5
- EEF7F8
- F6FBFC
シェード
- 91BCC1
- 7BA0A5
- 668589
- 526B6F
- 3E5355
- 2C3B3D
- 1A2526
- 0A1112
- 010202
トーン
- A3CFD4
- A0C6CA
- 9CBDC1
- 98B4B7
- 94ABAE
- 90A2A5
- 8C9A9B
- 889192
- 848889
カラーハーモニー
補色 +180°
- A7D8DE
Crystal
- EEC2BD
≈ Gentle Kiss
類似色 -30° +30°
- A7D8DE
Crystal
- ABD9CC
≈ Scud
- AED4EB
≈ Chapel Blue
トライアド +120° +240°
- A7D8DE
Crystal
- E0C3E0
≈ Epiphany
- DDCCA8
≈ Heavy Gluten
スプリットコンプリメンタリー +150° +210°
- A7D8DE
Crystal
- EAC0CF
≈ Childlike
- E9C6AE
≈ Pinkham
テトラード +90° +180° +270°
- A7D8DE
Crystal
- D0C8EC
≈ Soap
- EEC2BD
≈ Gentle Kiss
- CCD2AC
≈ Olive Martini
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.55:1 · APCA Lc 25
Ag
AAA黒の上
WCAG 13.52:1 · APCA Lc 78
最適な文字色: #000000
WCAG 13.52:1 (AAA) · APCA Lc 78
Contrast pairs
コードスニペット
CSS
:root {
--crystal: #a7d8de;
--crystal-rgb: 167 216 222;
--crystal-oklch: oklch(0.85 0.051 205.5);
}
.element {
color: var(--crystal);
background-color: hsl(187 45% 76%);
border-color: oklch(0.85 0.051 205.5);
}Tailwind CSS v4
@theme {
--color-crystal: #a7d8de;
--color-crystal-50: #e5fafd;
--color-crystal-100: #d5edf1;
--color-crystal-200: #bcdbe0;
--color-crystal-300: #9abfc5;
--color-crystal-400: #7ba8ad;
--color-crystal-500: #5c9097;
--color-crystal-600: #4e7a7f;
--color-crystal-700: #3e6266;
--color-crystal-800: #2c484a;
--color-crystal-900: #1e3234;
--color-crystal-950: #0e1e1f;
}SCSS
$crystal: #a7d8de;
$crystal-rgb: 167, 216, 222;
$crystal-light: mix(#fff, $crystal, 20%);
$crystal-dark: mix(#000, $crystal, 20%);
.element {
color: $crystal;
box-shadow: 0 0 0 2px rgba($crystal, 0.35);
}