色名 · #ABCED8
Hisoku Blue
Hisoku Blueは#ABCED8：rgb(171 206 216)、hsl(193 37% 76%)、oklch(0.829 0.04 217)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Hisoku Blue color name →
#ABCED8
oklch(0.829 0.04 217)
カラー変換
- HEX
- #abced8
- RGB
- rgb(171 206 216)
- HSL
- hsl(193 37% 76%)
- HWB
- hwb(193 67% 15%)
- OKLCH
- oklch(0.829 0.04 217)
- OKLab
- oklab(0.829 -0.032 -0.024)
- CIE Lab
- lab(80.44 -10.42 -9.05)
- LCH
- lch(80.44 13.8 221)
- CMYK
- cmyk(21% 5% 0% 15%)
ティント · シェード · トーン
ティント
- B3D3DC
- BCD8E0
- C4DDE4
- CDE1E8
- D5E6EB
- DDEBEF
- E6F0F3
- EEF5F7
- F7FAFB
シェード
- 94B3BC
- 7E98A0
- 687F85
- 54666B
- 404E53
- 2D383B
- 1B2325
- 0B0F11
- 010202
トーン
- A7C6CF
- A3BEC6
- 9EB6BD
- 9AAEB4
- 96A6AB
- 919EA2
- 8D979A
- 898F91
- 848888
カラーハーモニー
補色 +180°
- ABCED8
Hisoku Blue
- DFBFB5
≈ Muddy Rose
類似色 -30° +30°
- ABCED8
Hisoku Blue
- ABD0CB
≈ Cassiopeia
- B3CAE0
≈ Wind Blue
トライアド +120° +240°
- ABCED8
Hisoku Blue
- D9BED1
≈ Lovely Pink
- CEC8AB
≈ Wild Hillside
スプリットコンプリメンタリー +150° +210°
- ABCED8
Hisoku Blue
- DFBDC2
≈ Crystalline Pink
- D9C3AC
≈ Vanilla Iced Coffee
テトラード +90° +180° +270°
- ABCED8
Hisoku Blue
- CEC1DC
≈ Awesome Aura
- DFBFB5
≈ Muddy Rose
- C0CCB1
≈ Soft Froth
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.67:1 · APCA Lc 30
Ag
AAA黒の上
WCAG 12.55:1 · APCA Lc 73
最適な文字色: #000000
WCAG 12.55:1 (AAA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--hisoku-blue: #abced8;
--hisoku-blue-rgb: 171 206 216;
--hisoku-blue-oklch: oklch(0.829 0.04 217);
}
.element {
color: var(--hisoku-blue);
background-color: hsl(193 37% 76%);
border-color: oklch(0.829 0.04 217);
}Tailwind CSS v4
@theme {
--color-hisoku-blue: #abced8;
--color-hisoku-blue-50: #e9f8fd;
--color-hisoku-blue-100: #daebf1;
--color-hisoku-blue-200: #c2d9e0;
--color-hisoku-blue-300: #a2bdc5;
--color-hisoku-blue-400: #85a5ae;
--color-hisoku-blue-500: #688d97;
--color-hisoku-blue-600: #597780;
--color-hisoku-blue-700: #476067;
--color-hisoku-blue-800: #33464b;
--color-hisoku-blue-900: #223034;
--color-hisoku-blue-950: #111d1f;
}SCSS
$hisoku-blue: #abced8;
$hisoku-blue-rgb: 171, 206, 216;
$hisoku-blue-light: mix(#fff, $hisoku-blue, 20%);
$hisoku-blue-dark: mix(#000, $hisoku-blue, 20%);
.element {
color: $hisoku-blue;
box-shadow: 0 0 0 2px rgba($hisoku-blue, 0.35);
}