Named color · #A5DDEA
Early July
Early July is #A5DDEA: rgb(165 221 234), hsl(191 62% 78%), oklch(0.863 0.06 213.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Early July color name →
#A5DDEA
oklch(0.863 0.06 213.6)
Color conversions
- HEX
- #a5ddea
- RGB
- rgb(165 221 234)
- HSL
- hsl(191 62% 78%)
- HWB
- hwb(191 65% 8%)
- OKLCH
- oklch(0.863 0.06 213.6)
- OKLab
- oklab(0.863 -0.05 -0.033)
- CIE Lab
- lab(84.58 -16.33 -12.52)
- LCH
- lch(84.58 20.57 217.5)
- CMYK
- cmyk(29% 6% 0% 8%)
Tints · Shades · Tones
Tints
- AEE0EC
- B8E4EE
- C1E7F0
- CAEBF3
- D3EEF5
- DCF2F7
- E5F5F9
- EDF8FB
- F6FCFD
Shades
- 8FC0CB
- 79A4AE
- 658891
- 516E75
- 3D555A
- 2B3D41
- 1A2629
- 0A1113
- 010203
Tones
- A2D3DF
- 9ECAD4
- 9BC0C9
- 97B7BE
- 94AEB4
- 90A4A9
- 8C9B9F
- 889294
- 84898A
Color harmonies
Complementary +180°
- A5DDEA
Early July
- F7C5B9
≈ Serene Pink
Analogous -30° +30°
- A5DDEA
Early July
- A6E0D6
≈ Frosty
- B1D7F7
≈ Blue Rice
Triadic +120° +240°
- A5DDEA
Early July
- EBC4E3
≈ Sweet Murmur
- DFD2A6
≈ Gratin Dauphinois
Split-complementary +150° +210°
- A5DDEA
Early July
- F5C2CE
≈ Deco Pink
- EFCAAA
≈ Caramel Ice
Tetradic +90° +180° +270°
- A5DDEA
Early July
- DAC9F3
≈ Foggy Love
- F7C5B9
≈ Serene Pink
- CAD9AE
≈ Chameleon
Contrast & accessibility
Ag
FailOn white
WCAG 1.48:1 · APCA Lc 23
Ag
AAAOn black
WCAG 14.13:1 · APCA Lc 80
Best text color: #000000
WCAG 14.13:1 (AAA) · APCA Lc 80
Contrast pairs
Code snippets
CSS
:root {
--early-july: #a5ddea;
--early-july-rgb: 165 221 234;
--early-july-oklch: oklch(0.863 0.06 213.6);
}
.element {
color: var(--early-july);
background-color: hsl(191 62% 78%);
border-color: oklch(0.863 0.06 213.6);
}Tailwind CSS v4
@theme {
--color-early-july: #a5ddea;
--color-early-july-50: #e3faff;
--color-early-july-100: #d2edf5;
--color-early-july-200: #b8dbe5;
--color-early-july-300: #95c0cb;
--color-early-july-400: #75a8b4;
--color-early-july-500: #54919e;
--color-early-july-600: #487a86;
--color-early-july-700: #39626b;
--color-early-july-800: #28484e;
--color-early-july-900: #1b3236;
--color-early-july-950: #0b1e21;
}SCSS
$early-july: #a5ddea;
$early-july-rgb: 165, 221, 234;
$early-july-light: mix(#fff, $early-july, 20%);
$early-july-dark: mix(#000, $early-july, 20%);
.element {
color: $early-july;
box-shadow: 0 0 0 2px rgba($early-july, 0.35);
}