Benannte Farbe · #1177FF
Hadfield Blue
Hadfield Blue ist #1177FF: rgb(17 119 255), hsl(214 100% 53%), oklch(0.598 0.22 258.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Hadfield Blue color name →
#1177FF
oklch(0.598 0.22 258.7)
Farbumrechnungen
- HEX
- #1177ff
- RGB
- rgb(17 119 255)
- HSL
- hsl(214 100% 53%)
- HWB
- hwb(214 7% 0%)
- OKLCH
- oklch(0.598 0.22 258.7)
- OKLab
- oklab(0.598 -0.043 -0.216)
- CIE Lab
- lab(51.17 14.42 -76.38)
- LCH
- lch(51.17 77.73 280.7)
- CMYK
- cmyk(93% 53% 0% 0%)
Tints · Shades · Tones
Tints
- 3587FF
- 4F96FF
- 66A4FF
- 7CB2FF
- 92BFFF
- A8CCFF
- BDD9FF
- D3E6FF
- E9F3FF
Shades
- 0D67DE
- 0957BE
- 06479E
- 043880
- 022A63
- 011C48
- 00102E
- 000516
- 000103
Tones
- 277AF3
- 367CE6
- 427EDA
- 4C7FCE
- 5680C1
- 5F81B4
- 6881A8
- 70819B
- 78818E
Farbharmonien
Komplementär +180°
- 1177FF
Hadfield Blue
- A77500
≈ Falafel
Analog -30° +30°
- 1177FF
Hadfield Blue
- 008CB7
≈ Spinnaker Blue
- 815DF7
≈ Purple Honeycreeper
Triadisch +120° +240°
- 1177FF
Hadfield Blue
- E52749
≈ Manganese Red
- 389800
≈ Planter
Geteilt komplementär +150° +210°
- 1177FF
Hadfield Blue
- C95B00
≈ Rusty Orange
- 878500
≈ Palak Paneer
Tetradisch +90° +180° +270°
- 1177FF
Hadfield Blue
- D62F95
≈ Dark Princess Pink
- A77500
≈ Falafel
- 009673
≈ Pool Table
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.11:1 · APCA Lc 67
Ag
AAAuf Schwarz
WCAG 5.10:1 · APCA Lc 34
Beste Textfarbe: #000000
WCAG 5.10:1 (AA) · APCA Lc 34
Contrast pairs
Code-Snippets
CSS
:root {
--hadfield-blue: #1177ff;
--hadfield-blue-rgb: 17 119 255;
--hadfield-blue-oklch: oklch(0.598 0.22 258.7);
}
.element {
color: var(--hadfield-blue);
background-color: hsl(214 100% 53%);
border-color: oklch(0.598 0.22 258.7);
}Tailwind CSS v4
@theme {
--color-hadfield-blue: #1177ff;
--color-hadfield-blue-50: #d2f7ff;
--color-hadfield-blue-100: #bee9ff;
--color-hadfield-blue-200: #9ed4ff;
--color-hadfield-blue-300: #74b5ff;
--color-hadfield-blue-400: #429aff;
--color-hadfield-blue-500: #007bff;
--color-hadfield-blue-600: #0369e8;
--color-hadfield-blue-700: #0554bb;
--color-hadfield-blue-800: #003e8c;
--color-hadfield-blue-900: #002b63;
--color-hadfield-blue-950: #001744;
}SCSS
$hadfield-blue: #1177ff;
$hadfield-blue-rgb: 17, 119, 255;
$hadfield-blue-light: mix(#fff, $hadfield-blue, 20%);
$hadfield-blue-dark: mix(#000, $hadfield-blue, 20%);
.element {
color: $hadfield-blue;
box-shadow: 0 0 0 2px rgba($hadfield-blue, 0.35);
}