Benannte Farbe · #2C538A
Flashy Sapphire
Flashy Sapphire ist #2C538A: rgb(44 83 138), hsl(215 52% 36%), oklch(0.442 0.101 257.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Flashy Sapphire color name →
#2C538A
oklch(0.442 0.101 257.3)
Farbumrechnungen
- HEX
- #2c538a
- RGB
- rgb(44 83 138)
- HSL
- hsl(215 52% 36%)
- HWB
- hwb(215 17% 46%)
- OKLCH
- oklch(0.442 0.101 257.3)
- OKLab
- oklab(0.442 -0.022 -0.099)
- CIE Lab
- lab(34.6 0.55 -35.39)
- LCH
- lch(34.6 35.39 270.9)
- CMYK
- cmyk(68% 40% 0% 46%)
Tints · Shades · Tones
Tints
- 406396
- 5474A2
- 6885AE
- 7C95B9
- 91A7C5
- A6B8D1
- BCC9DC
- D2DBE8
- E8EDF3
Shades
- 254777
- 1E3B65
- 173053
- 112542
- 0A1B32
- 051122
- 020814
- 010207
- 000001
Tones
- 35588A
- 3E5D89
- 466188
- 4E6687
- 576A87
- 5F6F86
- 677384
- 6F7883
- 787C82
Farbharmonien
Komplementär +180°
- 2C538A
Flashy Sapphire
- 6F4B00
≈ Antique Bronze
Analog -30° +30°
- 2C538A
Flashy Sapphire
- 005C78
≈ Gulf Coast
- 504888
≈ Moonlight Sonata
Triadisch +120° +240°
- 2C538A
Flashy Sapphire
- 82383E
≈ Red Pear
- 366023
≈ Bright Nori
Geteilt komplementär +150° +210°
- 2C538A
Flashy Sapphire
- 7F3F1A
≈ Dusky Orange
- 595600
≈ Douro
Tetradisch +90° +180° +270°
- 2C538A
Flashy Sapphire
- 7A395E
≈ Pleasure
- 6F4B00
≈ Antique Bronze
- 006349
≈ Green Paw Paw
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 7.74:1 · APCA Lc 87
Ag
FailAuf Schwarz
WCAG 2.71:1 · APCA Lc 15
Beste Textfarbe: #FFFFFF
WCAG 7.74:1 (AAA) · APCA Lc 87
Contrast pairs
Code-Snippets
CSS
:root {
--flashy-sapphire: #2c538a;
--flashy-sapphire-rgb: 44 83 138;
--flashy-sapphire-oklch: oklch(0.442 0.101 257.3);
}
.element {
color: var(--flashy-sapphire);
background-color: hsl(215 52% 36%);
border-color: oklch(0.442 0.101 257.3);
}Tailwind CSS v4
@theme {
--color-flashy-sapphire: #2c538a;
--color-flashy-sapphire-50: #e4f7ff;
--color-flashy-sapphire-100: #d4e9ff;
--color-flashy-sapphire-200: #bbd6ff;
--color-flashy-sapphire-300: #99b9ec;
--color-flashy-sapphire-400: #78a0da;
--color-flashy-sapphire-500: #5a87c8;
--color-flashy-sapphire-600: #4c73a9;
--color-flashy-sapphire-700: #3d5c88;
--color-flashy-sapphire-800: #2a4365;
--color-flashy-sapphire-900: #1c2f47;
--color-flashy-sapphire-950: #0c1b2e;
}SCSS
$flashy-sapphire: #2c538a;
$flashy-sapphire-rgb: 44, 83, 138;
$flashy-sapphire-light: mix(#fff, $flashy-sapphire, 20%);
$flashy-sapphire-dark: mix(#000, $flashy-sapphire, 20%);
.element {
color: $flashy-sapphire;
box-shadow: 0 0 0 2px rgba($flashy-sapphire, 0.35);
}