Benoemde kleur · #7CB5C6
Tennis Blue
Tennis Blue is #7CB5C6: rgb(124 181 198), hsl(194 39% 63%), oklch(0.74 0.064 218.4). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Cyan mean? → · Tennis Blue color name →
#7CB5C6
oklch(0.74 0.064 218.4)
Kleurconversies
- HEX
- #7cb5c6
- RGB
- rgb(124 181 198)
- HSL
- hsl(194 39% 63%)
- HWB
- hwb(194 49% 22%)
- OKLCH
- oklch(0.74 0.064 218.4)
- OKLab
- oklab(0.74 -0.05 -0.04)
- CIE Lab
- lab(70.2 -16.03 -14.9)
- LCH
- lch(70.2 21.88 222.9)
- CMYK
- cmyk(37% 9% 0% 22%)
Tinten · Schaduwen · Tonen
Tinten
- 89BCCC
- 97C4D1
- A4CBD7
- B1D2DD
- BEDAE2
- CBE1E8
- D8E9EE
- E5F0F4
- F2F8F9
Schaduwen
- 6B9DAC
- 5A8692
- 4A6F7A
- 3B5962
- 2C444B
- 1E3035
- 111D21
- 050C0E
- 010202
Tonen
- 7DB0BF
- 7EAAB8
- 7FA5B1
- 7FA0AA
- 809AA3
- 80959C
- 809095
- 808B8E
- 808587
Kleurharmonieën
Complementair +180°
- 7CB5C6
Tennis Blue
- CF9D8E
≈ Nectarine Spice
Analoog -30° +30°
- 7CB5C6
Tennis Blue
- 7BB8B2
≈ Winter Surf
- 8BAFD2
≈ Mini Bay
Triadisch +120° +240°
- 7CB5C6
Tennis Blue
- C69CB9
≈ Idyllic Pink
- B5AC7D
≈ Fresh Brew
Gesplitst complementair +150° +210°
- 7CB5C6
Tennis Blue
- CF9AA3
≈ Cooing Doves
- C6A47F
≈ Latte
Tetradisch +90° +180° +270°
- 7CB5C6
Tennis Blue
- B6A0CA
≈ Dechala Lilac
- CF9D8E
≈ Nectarine Spice
- 9FB388
≈ Easy Green
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.26:1 · APCA Lc 45
Ag
AAAOp zwart
WCAG 9.28:1 · APCA Lc 58
Beste tekstkleur: #000000
WCAG 9.28:1 (AAA) · APCA Lc 58
Contrast pairs
Codefragmenten
CSS
:root {
--tennis-blue: #7cb5c6;
--tennis-blue-rgb: 124 181 198;
--tennis-blue-oklch: oklch(0.74 0.064 218.4);
}
.element {
color: var(--tennis-blue);
background-color: hsl(194 39% 63%);
border-color: oklch(0.74 0.064 218.4);
}Tailwind CSS v4
@theme {
--color-tennis-blue: #7cb5c6;
--color-tennis-blue-50: #e2faff;
--color-tennis-blue-100: #d2edf7;
--color-tennis-blue-200: #b7dbe8;
--color-tennis-blue-300: #94c0ce;
--color-tennis-blue-400: #73a8b8;
--color-tennis-blue-500: #5191a3;
--color-tennis-blue-600: #467a89;
--color-tennis-blue-700: #37626e;
--color-tennis-blue-800: #274851;
--color-tennis-blue-900: #1a3238;
--color-tennis-blue-950: #0a1e23;
}SCSS
$tennis-blue: #7cb5c6;
$tennis-blue-rgb: 124, 181, 198;
$tennis-blue-light: mix(#fff, $tennis-blue, 20%);
$tennis-blue-dark: mix(#000, $tennis-blue, 20%);
.element {
color: $tennis-blue;
box-shadow: 0 0 0 2px rgba($tennis-blue, 0.35);
}