色名 · #ABDCEE
Spring Shower
Spring Showerは#ABDCEE：rgb(171 220 238)、hsl(196 66% 80%)、oklch(0.866 0.056 222.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Spring Shower color name →
#ABDCEE
oklch(0.866 0.056 222.4)
カラー変換
- HEX
- #abdcee
- RGB
- rgb(171 220 238)
- HSL
- hsl(196 66% 80%)
- HWB
- hwb(196 67% 7%)
- OKLCH
- oklch(0.866 0.056 222.4)
- OKLab
- oklab(0.866 -0.042 -0.038)
- CIE Lab
- lab(84.77 -13.36 -14.3)
- LCH
- lch(84.77 19.57 227)
- CMYK
- cmyk(28% 8% 0% 7%)
ティント · シェード · トーン
ティント
- B4E0F0
- BCE3F2
- C5E7F3
- CDEAF5
- D6EEF7
- DEF1F8
- E6F5FA
- EEF8FC
- F7FCFD
シェード
- 94BFCF
- 7EA3B1
- 688893
- 546E77
- 40545C
- 2D3C42
- 1B262A
- 0B1114
- 010203
トーン
- A7D2E3
- A3C9D7
- 9FC0CC
- 9AB6C1
- 96ADB6
- 92A4AB
- 8D9BA0
- 899295
- 85898A
カラーハーモニー
補色 +180°
- ABDCEE
Spring Shower
- F4C8B6
≈ Taco
類似色 -30° +30°
- ABDCEE
Spring Shower
- A8DFDD
≈ High Altitude
- B9D6F8
≈ Oh Boy!
トライアド +120° +240°
- ABDCEE
Spring Shower
- EEC5DD
≈ Pink Odyssey
- DAD5AB
≈ Dull Sage
スプリットコンプリメンタリー +150° +210°
- ABDCEE
Spring Shower
- F6C4C9
≈ Old Fashioned Pink
- EBCEAB
≈ Sheriff
テトラード +90° +180° +270°
- ABDCEE
Spring Shower
- E0C9EE
≈ Syrian Violet
- F4C8B6
≈ Taco
- C5DBB6
≈ White Vienna
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.47:1 · APCA Lc 23
Ag
AAA黒の上
WCAG 14.20:1 · APCA Lc 81
最適な文字色: #000000
WCAG 14.20:1 (AAA) · APCA Lc 81
Contrast pairs
コードスニペット
CSS
:root {
--spring-shower: #abdcee;
--spring-shower-rgb: 171 220 238;
--spring-shower-oklch: oklch(0.866 0.056 222.4);
}
.element {
color: var(--spring-shower);
background-color: hsl(196 66% 80%);
border-color: oklch(0.866 0.056 222.4);
}Tailwind CSS v4
@theme {
--color-spring-shower: #abdcee;
--color-spring-shower-50: #e5f9ff;
--color-spring-shower-100: #d5ecf6;
--color-spring-shower-200: #bbdae6;
--color-spring-shower-300: #99becd;
--color-spring-shower-400: #7aa6b7;
--color-spring-shower-500: #5b8fa1;
--color-spring-shower-600: #4d7988;
--color-spring-shower-700: #3e616d;
--color-spring-shower-800: #2b4750;
--color-spring-shower-900: #1d3138;
--color-spring-shower-950: #0d1d22;
}SCSS
$spring-shower: #abdcee;
$spring-shower-rgb: 171, 220, 238;
$spring-shower-light: mix(#fff, $spring-shower, 20%);
$spring-shower-dark: mix(#000, $spring-shower, 20%);
.element {
color: $spring-shower;
box-shadow: 0 0 0 2px rgba($spring-shower, 0.35);
}