Named color · #A1D7EF
Soft Summer Rain
Soft Summer Rain is #A1D7EF: rgb(161 215 239), hsl(198 71% 78%), oklch(0.85 0.065 227.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Soft Summer Rain color name →
#A1D7EF
oklch(0.85 0.065 227.1)
Color conversions
- HEX
- #a1d7ef
- RGB
- rgb(161 215 239)
- HSL
- hsl(198 71% 78%)
- HWB
- hwb(198 63% 6%)
- OKLCH
- oklch(0.85 0.065 227.1)
- OKLab
- oklab(0.85 -0.044 -0.048)
- CIE Lab
- lab(82.85 -13.78 -17.75)
- LCH
- lch(82.85 22.47 232.2)
- CMYK
- cmyk(33% 10% 0% 6%)
Tints · Shades · Tones
Tints
- ABDBF1
- B4DFF2
- BEE3F4
- C7E7F6
- D1EBF7
- DAEFF9
- E3F3FA
- EDF7FC
- F6FBFE
Shades
- 8BBBD0
- 769FB1
- 628594
- 4E6B78
- 3C525C
- 2A3B42
- 19252A
- 091114
- 010203
Tones
- 9ECEE3
- 9BC5D8
- 98BCCD
- 95B3C1
- 92ABB6
- 8EA2AB
- 8B99A0
- 879195
- 84888B
Color harmonies
Complementary +180°
- A1D7EF
Soft Summer Rain
- F2C2AA
≈ Cosmetic Peach
Analogous -30° +30°
- A1D7EF
Soft Summer Rain
- 9BDBDC
≈ Blue Tint
- B3D0F9
≈ Ice Cold Stare
Triadic +120° +240°
- A1D7EF
Soft Summer Rain
- EFBDD6
≈ Parrot Tulip
- D2D1A0
≈ Calming Effect
Split-complementary +150° +210°
- A1D7EF
Soft Summer Rain
- F5BDBE
≈ Spanish Pink
- E6C99E
≈ Jasper Cane
Tetradic +90° +180° +270°
- A1D7EF
Soft Summer Rain
- DFC1EA
≈ Glittering Gemstone
- F2C2AA
≈ Cosmetic Peach
- BAD8AF
≈ Bleached Spruce
Contrast & accessibility
Ag
FailOn white
WCAG 1.55:1 · APCA Lc 26
Ag
AAAOn black
WCAG 13.48:1 · APCA Lc 78
Best text color: #000000
WCAG 13.48:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--soft-summer-rain: #a1d7ef;
--soft-summer-rain-rgb: 161 215 239;
--soft-summer-rain-oklch: oklch(0.85 0.065 227.1);
}
.element {
color: var(--soft-summer-rain);
background-color: hsl(198 71% 78%);
border-color: oklch(0.85 0.065 227.1);
}Tailwind CSS v4
@theme {
--color-soft-summer-rain: #a1d7ef;
--color-soft-summer-rain-50: #e3f9ff;
--color-soft-summer-rain-100: #d3edfa;
--color-soft-summer-rain-200: #b9daeb;
--color-soft-summer-rain-300: #96bed2;
--color-soft-summer-rain-400: #75a7bc;
--color-soft-summer-rain-500: #558fa8;
--color-soft-summer-rain-600: #49798e;
--color-soft-summer-rain-700: #3a6172;
--color-soft-summer-rain-800: #284753;
--color-soft-summer-rain-900: #1b313a;
--color-soft-summer-rain-950: #0b1d24;
}SCSS
$soft-summer-rain: #a1d7ef;
$soft-summer-rain-rgb: 161, 215, 239;
$soft-summer-rain-light: mix(#fff, $soft-summer-rain, 20%);
$soft-summer-rain-dark: mix(#000, $soft-summer-rain, 20%);
.element {
color: $soft-summer-rain;
box-shadow: 0 0 0 2px rgba($soft-summer-rain, 0.35);
}