Benannte Farbe · #254D6A
Kinetic Blue
Kinetic Blue ist #254D6A: rgb(37 77 106), hsl(205 48% 28%), oklch(0.405 0.067 242.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Kinetic Blue color name →
#254D6A
oklch(0.405 0.067 242.4)
Farbumrechnungen
- HEX
- #254d6a
- RGB
- rgb(37 77 106)
- HSL
- hsl(205 48% 28%)
- HWB
- hwb(205 15% 58%)
- OKLCH
- oklch(0.405 0.067 242.4)
- OKLab
- oklab(0.405 -0.031 -0.059)
- CIE Lab
- lab(30.89 -7.04 -21.44)
- LCH
- lch(30.89 22.57 251.8)
- CMYK
- cmyk(65% 27% 0% 58%)
Tints · Shades · Tones
Tints
- 3A5D78
- 4F6E87
- 637F95
- 7890A4
- 8EA2B3
- A4B4C2
- BAC6D1
- D1D9E0
- E8ECEF
Shades
- 1F425B
- 19374D
- 132C3F
- 0D2231
- 081824
- 040F18
- 02070D
- 000204
- 000000
Tones
- 2F526C
- 38576F
- 425C71
- 4B6173
- 546776
- 5C6C78
- 65717A
- 6E767C
- 777B7E
Farbharmonien
Komplementär +180°
- 254D6A
Kinetic Blue
- 634020
≈ Satoimo Brown
Analog -30° +30°
- 254D6A
Kinetic Blue
- 0B525E
≈ Genetic Code
- 3D466D
≈ Constellation Blue
Triadisch +120° +240°
- 254D6A
Kinetic Blue
- 673946
≈ Tawny Port
- 434F24
≈ Bronze Tone
Geteilt komplementär +150° +210°
- 254D6A
Kinetic Blue
- 683B32
≈ Burnished Bark
- 564819
≈ Bronze Olive
Tetradisch +90° +180° +270°
- 254D6A
Kinetic Blue
- 5E3B59
≈ Parma Plum Red
- 634020
≈ Satoimo Brown
- 2A5337
≈ Kaitoke Green
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 8.94:1 · APCA Lc 90
Ag
FailAuf Schwarz
WCAG 2.34:1 · APCA Lc 12
Beste Textfarbe: #FFFFFF
WCAG 8.94:1 (AAA) · APCA Lc 90
Contrast pairs
Code-Snippets
CSS
:root {
--kinetic-blue: #254d6a;
--kinetic-blue-rgb: 37 77 106;
--kinetic-blue-oklch: oklch(0.405 0.067 242.4);
}
.element {
color: var(--kinetic-blue);
background-color: hsl(205 48% 28%);
border-color: oklch(0.405 0.067 242.4);
}Tailwind CSS v4
@theme {
--color-kinetic-blue: #254d6a;
--color-kinetic-blue-50: #e6f8ff;
--color-kinetic-blue-100: #d6ebfd;
--color-kinetic-blue-200: #bdd8ef;
--color-kinetic-blue-300: #9bbcd8;
--color-kinetic-blue-400: #7ca4c3;
--color-kinetic-blue-500: #5e8caf;
--color-kinetic-blue-600: #507694;
--color-kinetic-blue-700: #405f76;
--color-kinetic-blue-800: #2d4657;
--color-kinetic-blue-900: #1e303d;
--color-kinetic-blue-950: #0e1c26;
}SCSS
$kinetic-blue: #254d6a;
$kinetic-blue-rgb: 37, 77, 106;
$kinetic-blue-light: mix(#fff, $kinetic-blue, 20%);
$kinetic-blue-dark: mix(#000, $kinetic-blue, 20%);
.element {
color: $kinetic-blue;
box-shadow: 0 0 0 2px rgba($kinetic-blue, 0.35);
}