Nazwany kolor · #1DACD6
Bright Cerulean
Bright Cerulean to #1DACD6: rgb(29 172 214), hsl(194 76% 48%), oklch(0.693 0.125 224.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Cyan mean? → · Bright Cerulean color name →
#1DACD6
oklch(0.693 0.125 224.4)
Konwersje koloru
- HEX
- #1dacd6
- RGB
- rgb(29 172 214)
- HSL
- hsl(194 76% 48%)
- HWB
- hwb(194 11% 16%)
- OKLCH
- oklch(0.693 0.125 224.4)
- OKLab
- oklab(0.693 -0.09 -0.088)
- CIE Lab
- lab(64.9 -25.51 -32.03)
- LCH
- lch(64.9 40.95 231.5)
- CMYK
- cmyk(86% 20% 0% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 46B5DA
- 60BDDF
- 77C6E3
- 8CCEE7
- A1D6EC
- B4DEF0
- C7E7F4
- DAEFF7
- ECF7FB
Odcienie ciemniejsze
- 1895BA
- 137F9E
- 0E6984
- 09546A
- 054052
- 032D3B
- 011B25
- 000B10
- 000102
Tony
- 36A8CD
- 45A4C5
- 519FBC
- 5B9BB3
- 6397AB
- 6A92A2
- 718E9A
- 768991
- 7B8589
Harmonie kolorów
Komplementarna +180°
- 1DACD6
Bright Cerulean
- DC8158
≈ Show Business
Analogowa -30° +30°
- 1DACD6
Bright Cerulean
- 00B3B2
≈ Laguna Green
- 639FE8
≈ Feather Star
Triada +120° +240°
- 1DACD6
Bright Cerulean
- D27BAF
≈ Ice Plant
- A9A036
≈ Parrot Feather
Komplementarna rozszczepiona +150° +210°
- 1DACD6
Bright Cerulean
- DF7A84
≈ Peach Blossom
- CA9035
≈ Mecca Gold
Tetrada +90° +180° +270°
- 1DACD6
Bright Cerulean
- B984D2
≈ Purception
- DC8158
≈ Show Business
- 7BAD5B
≈ Arugula
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.65:1 · APCA Lc 51
Ag
AAANa czerni
WCAG 7.92:1 · APCA Lc 51
Najlepszy kolor tekstu: #000000
WCAG 7.92:1 (AAA) · APCA Lc 51
Contrast pairs
Fragmenty kodu
CSS
:root {
--bright-cerulean: #1dacd6;
--bright-cerulean-rgb: 29 172 214;
--bright-cerulean-oklch: oklch(0.693 0.125 224.4);
}
.element {
color: var(--bright-cerulean);
background-color: hsl(194 76% 48%);
border-color: oklch(0.693 0.125 224.4);
}Tailwind CSS v4
@theme {
--color-bright-cerulean: #1dacd6;
--color-bright-cerulean-50: #d0fdff;
--color-bright-cerulean-100: #bcf1ff;
--color-bright-cerulean-200: #99e0fe;
--color-bright-cerulean-300: #6bc5e9;
--color-bright-cerulean-400: #31aed5;
--color-bright-cerulean-500: #0096c3;
--color-bright-cerulean-600: #007fa5;
--color-bright-cerulean-700: #006684;
--color-bright-cerulean-800: #004b61;
--color-bright-cerulean-900: #003444;
--color-bright-cerulean-950: #001f2c;
}SCSS
$bright-cerulean: #1dacd6;
$bright-cerulean-rgb: 29, 172, 214;
$bright-cerulean-light: mix(#fff, $bright-cerulean, 20%);
$bright-cerulean-dark: mix(#000, $bright-cerulean, 20%);
.element {
color: $bright-cerulean;
box-shadow: 0 0 0 2px rgba($bright-cerulean, 0.35);
}