Benannte Farbe · #24A4C8
Celestine Spring
Celestine Spring ist #24A4C8: rgb(36 164 200), hsl(193 69% 46%), oklch(0.669 0.116 222.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Cyan mean? → · Celestine Spring color name →
#24A4C8
oklch(0.669 0.116 222.4)
Farbumrechnungen
- HEX
- #24a4c8
- RGB
- rgb(36 164 200)
- HSL
- hsl(193 69% 46%)
- HWB
- hwb(193 14% 22%)
- OKLCH
- oklch(0.669 0.116 222.4)
- OKLab
- oklab(0.669 -0.086 -0.078)
- CIE Lab
- lab(62.09 -25.03 -28.61)
- LCH
- lch(62.09 38.02 228.8)
- CMYK
- cmyk(82% 18% 0% 22%)
Tints · Shades · Tones
Tints
- 47ADCE
- 61B6D3
- 77C0D9
- 8CC9DF
- A0D2E4
- B3DBEA
- C6E4EF
- D9EDF4
- ECF6FA
Shades
- 1E8EAE
- 187994
- 12647B
- 0C5063
- 073D4C
- 042B36
- 021A21
- 000A0F
- 000102
Tones
- 38A1C1
- 469DBA
- 519AB2
- 5A96AB
- 6293A4
- 6A8F9D
- 708B96
- 76888E
- 7B8487
Farbharmonien
Komplementär +180°
- 24A4C8
Celestine Spring
- D07C5A
≈ Apricot Brown
Analog -30° +30°
- 24A4C8
Celestine Spring
- 00ABA7
≈ Teal Me No Lies
- 5E98DA
≈ Little Boy Blue
Triadisch +120° +240°
- 24A4C8
Celestine Spring
- C577A8
≈ Strawberry Freeze
- A39738
≈ Shimmering Glade
Geteilt komplementär +150° +210°
- 24A4C8
Celestine Spring
- D27581
≈ Pink Shade
- C0883A
≈ Peanut Butter
Tetradisch +90° +180° +270°
- 24A4C8
Celestine Spring
- AD7FC8
≈ Wisteria
- D07C5A
≈ Apricot Brown
- 79A456
≈ Grassy Meadow
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.90:1 · APCA Lc 55
Ag
AAAAuf Schwarz
WCAG 7.21:1 · APCA Lc 47
Beste Textfarbe: #000000
WCAG 7.21:1 (AAA) · APCA Lc 47
Contrast pairs
Code-Snippets
CSS
:root {
--celestine-spring: #24a4c8;
--celestine-spring-rgb: 36 164 200;
--celestine-spring-oklch: oklch(0.669 0.116 222.4);
}
.element {
color: var(--celestine-spring);
background-color: hsl(193 69% 46%);
border-color: oklch(0.669 0.116 222.4);
}Tailwind CSS v4
@theme {
--color-celestine-spring: #24a4c8;
--color-celestine-spring-50: #d3fdff;
--color-celestine-spring-100: #bff1ff;
--color-celestine-spring-200: #9ee0f9;
--color-celestine-spring-300: #71c4e4;
--color-celestine-spring-400: #3eadd0;
--color-celestine-spring-500: #0096bd;
--color-celestine-spring-600: #007fa0;
--color-celestine-spring-700: #006580;
--color-celestine-spring-800: #004b5e;
--color-celestine-spring-900: #003442;
--color-celestine-spring-950: #001f2a;
}SCSS
$celestine-spring: #24a4c8;
$celestine-spring-rgb: 36, 164, 200;
$celestine-spring-light: mix(#fff, $celestine-spring, 20%);
$celestine-spring-dark: mix(#000, $celestine-spring, 20%);
.element {
color: $celestine-spring;
box-shadow: 0 0 0 2px rgba($celestine-spring, 0.35);
}