Benannte Farbe · #4ABBD5
Bachelor Button
Bachelor Button ist #4ABBD5: rgb(74 187 213), hsl(191 62% 56%), oklch(0.738 0.107 215.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Cyan mean? → · Bachelor Button color name →
#4ABBD5
oklch(0.738 0.107 215.8)
Farbumrechnungen
- HEX
- #4abbd5
- RGB
- rgb(74 187 213)
- HSL
- hsl(191 62% 56%)
- HWB
- hwb(191 29% 16%)
- OKLCH
- oklch(0.738 0.107 215.8)
- OKLab
- oklab(0.738 -0.087 -0.063)
- CIE Lab
- lab(70.3 -27.11 -23.15)
- LCH
- lch(70.3 35.65 220.5)
- CMYK
- cmyk(65% 12% 0% 16%)
Tints · Shades · Tones
Tints
- 62C2D9
- 76C9DE
- 89D0E2
- 9BD7E6
- ADDDEA
- BEE4EF
- CEEBF3
- DFF2F7
- EFF8FB
Shades
- 3FA2B9
- 358A9E
- 2A7383
- 205C6A
- 174651
- 0E323A
- 061F24
- 020D10
- 000202
Tones
- 54B5CC
- 5DAFC4
- 64A9BB
- 6AA4B2
- 6F9EAA
- 7398A1
- 779299
- 7A8C91
- 7D8688
Farbharmonien
Komplementär +180°
- 4ABBD5
Bachelor Button
- E5917B
≈ Nude Flamingo
Analog -30° +30°
- 4ABBD5
Bachelor Button
- 49C0B4
≈ Tint of Turquoise
- 6FB1EA
≈ Sanctuary Spa
Triadisch +120° +240°
- 4ABBD5
Bachelor Button
- D590C4
≈ Pressed Flower
- BEAA56
≈ Yellow Maize
Geteilt komplementär +150° +210°
- 4ABBD5
Bachelor Button
- E48DA0
≈ Underwater Flare
- D89C5E
≈ Ritzy
Tetradisch +90° +180° +270°
- 4ABBD5
Bachelor Button
- BB99E0
≈ Bright Lavender
- E5917B
≈ Nude Flamingo
- 9AB66A
≈ Light Birch Green
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.24:1 · APCA Lc 44
Ag
AAAAuf Schwarz
WCAG 9.36:1 · APCA Lc 58
Beste Textfarbe: #000000
WCAG 9.36:1 (AAA) · APCA Lc 58
Contrast pairs
Code-Snippets
CSS
:root {
--bachelor-button: #4abbd5;
--bachelor-button-rgb: 74 187 213;
--bachelor-button-oklch: oklch(0.738 0.107 215.8);
}
.element {
color: var(--bachelor-button);
background-color: hsl(191 62% 56%);
border-color: oklch(0.738 0.107 215.8);
}Tailwind CSS v4
@theme {
--color-bachelor-button: #4abbd5;
--color-bachelor-button-50: #d4fdff;
--color-bachelor-button-100: #c1f1ff;
--color-bachelor-button-200: #a0e0f3;
--color-bachelor-button-300: #74c5dc;
--color-bachelor-button-400: #44aec6;
--color-bachelor-button-500: #0097b3;
--color-bachelor-button-600: #008097;
--color-bachelor-button-700: #006679;
--color-bachelor-button-800: #004b59;
--color-bachelor-button-900: #00343e;
--color-bachelor-button-950: #002027;
}SCSS
$bachelor-button: #4abbd5;
$bachelor-button-rgb: 74, 187, 213;
$bachelor-button-light: mix(#fff, $bachelor-button, 20%);
$bachelor-button-dark: mix(#000, $bachelor-button, 20%);
.element {
color: $bachelor-button;
box-shadow: 0 0 0 2px rgba($bachelor-button, 0.35);
}