Named color · #0094C8
Germander Speedwell
Germander Speedwell is #0094C8: rgb(0 148 200), hsl(196 100% 39%), oklch(0.626 0.128 232.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Germander Speedwell color name →
#0094C8
oklch(0.626 0.128 232.4)
Color conversions
- HEX
- #0094c8
- RGB
- rgb(0 148 200)
- HSL
- hsl(196 100% 39%)
- HWB
- hwb(196 0% 22%)
- OKLCH
- oklch(0.626 0.128 232.4)
- OKLab
- oklab(0.626 -0.078 -0.102)
- CIE Lab
- lab(56.81 -19.52 -36.79)
- LCH
- lch(56.81 41.65 242.1)
- CMYK
- cmyk(100% 26% 0% 22%)
Tints · Shades · Tones
Tints
- 389FCE
- 55AAD4
- 6DB5DA
- 83BFDF
- 98CAE5
- ADD5EA
- C2DFF0
- D6EAF5
- EBF4FA
Shades
- 0080AE
- 006D94
- 005A7B
- 004863
- 00364C
- 002636
- 001621
- 00080F
- 000102
Tones
- 2892C1
- 3A91BA
- 478FB3
- 528DAC
- 5C8BA4
- 64899D
- 6C8796
- 73858F
- 7A8287
Color harmonies
Complementary +180°
- 0094C8
Germander Speedwell
- C36F36
≈ Golden Ochre
Analogous -30° +30°
- 0094C8
Germander Speedwell
- 009BA4
≈ Island Dream
- 5D86D5
≈ Blue Jay
Triadic +120° +240°
- 0094C8
Germander Speedwell
- C26590
≈ Ibis Rose
- 8A8F1F
≈ Old Asparagus
Split-complementary +150° +210°
- 0094C8
Germander Speedwell
- CA6564
≈ Fuzzy Wuzzy
- AE7F03
≈ Murder Mustard
Tetradic +90° +180° +270°
- 0094C8
Germander Speedwell
- AC6CB5
≈ Soft Purple
- C36F36
≈ Golden Ochre
- 569B51
≈ Wicked Witch
Contrast & accessibility
Ag
FailOn white
WCAG 3.45:1 · APCA Lc 61
Ag
AAOn black
WCAG 6.06:1 · APCA Lc 40
Best text color: #000000
WCAG 6.06:1 (AA) · APCA Lc 40
Contrast pairs
Code snippets
CSS
:root {
--germander-speedwell: #0094c8;
--germander-speedwell-rgb: 0 148 200;
--germander-speedwell-oklch: oklch(0.626 0.128 232.4);
}
.element {
color: var(--germander-speedwell);
background-color: hsl(196 100% 39%);
border-color: oklch(0.626 0.128 232.4);
}Tailwind CSS v4
@theme {
--color-germander-speedwell: #0094c8;
--color-germander-speedwell-50: #d2fcff;
--color-germander-speedwell-100: #bff0ff;
--color-germander-speedwell-200: #9ddeff;
--color-germander-speedwell-300: #71c2ef;
--color-germander-speedwell-400: #3dabdd;
--color-germander-speedwell-500: #0093cc;
--color-germander-speedwell-600: #007cac;
--color-germander-speedwell-700: #00638a;
--color-germander-speedwell-800: #004966;
--color-germander-speedwell-900: #003348;
--color-germander-speedwell-950: #001e2f;
}SCSS
$germander-speedwell: #0094c8;
$germander-speedwell-rgb: 0, 148, 200;
$germander-speedwell-light: mix(#fff, $germander-speedwell, 20%);
$germander-speedwell-dark: mix(#000, $germander-speedwell, 20%);
.element {
color: $germander-speedwell;
box-shadow: 0 0 0 2px rgba($germander-speedwell, 0.35);
}