Nächste benannte Farbe · #4973C5
#4973C5
Nächste benannte Farbe: Serenity’s Reign
#4973C5 (rgb(73 115 197), hsl(220 52% 53%), oklch(0.565 0.136 262.4)) liegt am nächsten an der benannten Farbe Serenity’s Reign. Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
#4973C5
oklch(0.565 0.136 262.4)
Farbumrechnungen
- HEX
- #4973c5
- RGB
- rgb(73 115 197)
- HSL
- hsl(220 52% 53%)
- HWB
- hwb(220 29% 23%)
- OKLCH
- oklch(0.565 0.136 262.4)
- OKLab
- oklab(0.565 -0.018 -0.134)
- CIE Lab
- lab(48.46 5.23 -48.08)
- LCH
- lch(48.46 48.37 276.2)
- CMYK
- cmyk(63% 42% 0% 23%)
Tints · Shades · Tones
Tints
- 5A81CC
- 6C8FD2
- 7D9DD8
- 8FABDF
- A1B9E4
- B3C7EA
- C6D5F0
- D9E3F5
- ECF1FA
Shades
- 3E63AB
- 345492
- 2A4579
- 203661
- 17284B
- 0E1B35
- 060F21
- 02050E
- 000102
Tones
- 4F75BE
- 5577B8
- 5A78B1
- 607AAB
- 657BA4
- 6B7C9D
- 707E96
- 767E8F
- 7B7F88
Farbharmonien
Komplementär +180°
- 4973C5
Serenity’s Reign
- 976E00
≈ Sandy Taupe
Analog -30° +30°
- 4973C5
Serenity’s Reign
- 0080AE
≈ Turkish Blue
- 7964BE
≈ Ultra Violet
Triadisch +120° +240°
- 4973C5
Serenity’s Reign
- B85050
≈ Enticing Red
- 40893B
≈ Overgrown Mausoleum
Geteilt komplementär +150° +210°
- 4973C5
Serenity’s Reign
- B25B16
≈ Elm Brown Red
- 787D00
≈ Verde Tropa
Tetradisch +90° +180° +270°
- 4973C5
Serenity’s Reign
- B0507E
≈ Signal Pink
- 976E00
≈ Sandy Taupe
- 008A6F
≈ Industrial Turquoise
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 4.62:1 · APCA Lc 72
Ag
AAAuf Schwarz
WCAG 4.54:1 · APCA Lc 30
Beste Textfarbe: #FFFFFF
WCAG 4.62:1 (AA) · APCA Lc 72
Contrast pairs
Code-Snippets
CSS
:root {
--serenity-s-reign: #4973c5;
--serenity-s-reign-rgb: 73 115 197;
--serenity-s-reign-oklch: oklch(0.565 0.136 262.4);
}
.element {
color: var(--serenity-s-reign);
background-color: hsl(220 52% 53%);
border-color: oklch(0.565 0.136 262.4);
}Tailwind CSS v4
@theme {
--color-serenity-s-reign: #4973c5;
--color-serenity-s-reign-50: #e2f6ff;
--color-serenity-s-reign-100: #d1e8ff;
--color-serenity-s-reign-200: #b7d4ff;
--color-serenity-s-reign-300: #95b6fd;
--color-serenity-s-reign-400: #729dee;
--color-serenity-s-reign-500: #5483df;
--color-serenity-s-reign-600: #476fbc;
--color-serenity-s-reign-700: #395997;
--color-serenity-s-reign-800: #264171;
--color-serenity-s-reign-900: #192d4f;
--color-serenity-s-reign-950: #0a1a35;
}SCSS
$serenity-s-reign: #4973c5;
$serenity-s-reign-rgb: 73, 115, 197;
$serenity-s-reign-light: mix(#fff, $serenity-s-reign, 20%);
$serenity-s-reign-dark: mix(#000, $serenity-s-reign, 20%);
.element {
color: $serenity-s-reign;
box-shadow: 0 0 0 2px rgba($serenity-s-reign, 0.35);
}