Nazwany kolor · #2CB1EB
Lynx Screen Blue
Lynx Screen Blue to #2CB1EB: rgb(44 177 235), hsl(198 83% 55%), oklch(0.717 0.137 233). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Lynx Screen Blue color name →
#2CB1EB
oklch(0.717 0.137 233)
Konwersje koloru
- HEX
- #2cb1eb
- RGB
- rgb(44 177 235)
- HSL
- hsl(198 83% 55%)
- HWB
- hwb(198 17% 8%)
- OKLCH
- oklch(0.717 0.137 233)
- OKLab
- oklab(0.717 -0.082 -0.109)
- CIE Lab
- lab(67.36 -20.83 -39.68)
- LCH
- lch(67.36 44.81 242.3)
- CMYK
- cmyk(81% 25% 0% 8%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 4EB9EE
- 67C1F0
- 7CC9F2
- 91D1F5
- A4D9F7
- B7E1F9
- C9E8FA
- DBF0FC
- EDF8FE
Odcienie ciemniejsze
- 2599CC
- 1E83AE
- 176C91
- 115775
- 0A425B
- 052F41
- 021C29
- 010C13
- 000103
Tony
- 3FACE0
- 4CA8D5
- 56A3CB
- 5F9EC0
- 6699B5
- 6D94AB
- 728FA0
- 778A95
- 7C858B
Harmonie kolorów
Komplementarna +180°
- 2CB1EB
Lynx Screen Blue
- E5894A
≈ Orange Poppy
Analogowa -30° +30°
- 2CB1EB
Lynx Screen Blue
- 00BAC6
≈ Utopia Beckons
- 76A2F9
≈ Fennel Flower
Triada +120° +240°
- 2CB1EB
Lynx Screen Blue
- E47DAB
≈ Pinking. Fast and Slow
- A5AC39
≈ Sphagnales Moss
Komplementarna rozszczepiona +150° +210°
- 2CB1EB
Lynx Screen Blue
- ED7E7B
≈ Meat
- CD9B26
≈ Citronne
Tetrada +90° +180° +270°
- 2CB1EB
Lynx Screen Blue
- CC85D5
≈ Purception
- E5894A
≈ Orange Poppy
- 6CB969
≈ Forest Fern
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.44:1 · APCA Lc 48
Ag
AAANa czerni
WCAG 8.59:1 · APCA Lc 54
Najlepszy kolor tekstu: #000000
WCAG 8.59:1 (AAA) · APCA Lc 54
Contrast pairs
Fragmenty kodu
CSS
:root {
--lynx-screen-blue: #2cb1eb;
--lynx-screen-blue-rgb: 44 177 235;
--lynx-screen-blue-oklch: oklch(0.717 0.137 233);
}
.element {
color: var(--lynx-screen-blue);
background-color: hsl(198 83% 55%);
border-color: oklch(0.717 0.137 233);
}Tailwind CSS v4
@theme {
--color-lynx-screen-blue: #2cb1eb;
--color-lynx-screen-blue-50: #d0fcff;
--color-lynx-screen-blue-100: #bcf0ff;
--color-lynx-screen-blue-200: #9adeff;
--color-lynx-screen-blue-300: #6bc3f3;
--color-lynx-screen-blue-400: #31abe2;
--color-lynx-screen-blue-500: #0093d1;
--color-lynx-screen-blue-600: #007cb0;
--color-lynx-screen-blue-700: #00648e;
--color-lynx-screen-blue-800: #004a69;
--color-lynx-screen-blue-900: #00334a;
--color-lynx-screen-blue-950: #001e30;
}SCSS
$lynx-screen-blue: #2cb1eb;
$lynx-screen-blue-rgb: 44, 177, 235;
$lynx-screen-blue-light: mix(#fff, $lynx-screen-blue, 20%);
$lynx-screen-blue-dark: mix(#000, $lynx-screen-blue, 20%);
.element {
color: $lynx-screen-blue;
box-shadow: 0 0 0 2px rgba($lynx-screen-blue, 0.35);
}