Benoemde kleur · #134682
Poster Blue
Poster Blue is #134682: rgb(19 70 130), hsl(212 74% 29%), oklch(0.396 0.114 255.3). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Blue mean? → · Poster Blue color name →
#134682
oklch(0.396 0.114 255.3)
Kleurconversies
- HEX
- #134682
- RGB
- rgb(19 70 130)
- HSL
- hsl(212 74% 29%)
- HWB
- hwb(212 7% 49%)
- OKLCH
- oklch(0.396 0.114 255.3)
- OKLab
- oklab(0.396 -0.029 -0.11)
- CIE Lab
- lab(29.13 1.79 -39.25)
- LCH
- lch(29.13 39.29 272.6)
- CMYK
- cmyk(85% 46% 0% 49%)
Tinten · Schaduwen · Tonen
Tinten
- 2C588F
- 436A9C
- 597CA8
- 708EB5
- 87A0C1
- 9EB3CE
- B5C5DA
- CED8E6
- E6ECF3
Schaduwen
- 0F3C70
- 0B325F
- 07284E
- 051E3E
- 03152F
- 010D20
- 010512
- 000206
- 000001
Tonen
- 214C82
- 2D5383
- 385983
- 425F83
- 4D6483
- 576A83
- 617082
- 6C7582
- 767B81
Kleurharmonieën
Complementair +180°
- 134682
Poster Blue
- 603F00
≈ Hippogriff Brown
Analoog -30° +30°
- 134682
Poster Blue
- 004E65
≈ Hanada Blue
- 423A80
≈ Sage Violet
Triadisch +120° +240°
- 134682
Poster Blue
- 782632
≈ Amaranth Blossom
- 285303
≈ Patch of Land
Gesplitst complementair +150° +210°
- 134682
Poster Blue
- 752D00
≈ Chestnut
- 4D4900
≈ Sugarloaf Brown
Tetradisch +90° +180° +270°
Contrast en toegankelijkheid
Ag
AAAOp wit
WCAG 9.43:1 · APCA Lc 91
Ag
FailOp zwart
WCAG 2.22:1 · APCA Lc 11
Beste tekstkleur: #FFFFFF
WCAG 9.43:1 (AAA) · APCA Lc 91
Contrast pairs
Codefragmenten
CSS
:root {
--poster-blue: #134682;
--poster-blue-rgb: 19 70 130;
--poster-blue-oklch: oklch(0.396 0.114 255.3);
}
.element {
color: var(--poster-blue);
background-color: hsl(212 74% 29%);
border-color: oklch(0.396 0.114 255.3);
}Tailwind CSS v4
@theme {
--color-poster-blue: #134682;
--color-poster-blue-50: #e1f7ff;
--color-poster-blue-100: #d0eaff;
--color-poster-blue-200: #b6d7ff;
--color-poster-blue-300: #92baf2;
--color-poster-blue-400: #70a1e1;
--color-poster-blue-500: #4f88d0;
--color-poster-blue-600: #4473b0;
--color-poster-blue-700: #365c8d;
--color-poster-blue-800: #244469;
--color-poster-blue-900: #182f4a;
--color-poster-blue-950: #091b30;
}SCSS
$poster-blue: #134682;
$poster-blue-rgb: 19, 70, 130;
$poster-blue-light: mix(#fff, $poster-blue, 20%);
$poster-blue-dark: mix(#000, $poster-blue, 20%);
.element {
color: $poster-blue;
box-shadow: 0 0 0 2px rgba($poster-blue, 0.35);
}