Colore con nome · #31A6D1
Modal
Modal è #31A6D1: rgb(49 166 209), hsl(196 63% 51%), oklch(0.68 0.118 227.6). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Cyan mean? → · Modal color name →
#31A6D1
oklch(0.68 0.118 227.6)
Conversioni di colore
- HEX
- #31a6d1
- RGB
- rgb(49 166 209)
- HSL
- hsl(196 63% 51%)
- HWB
- hwb(196 19% 18%)
- OKLCH
- oklch(0.68 0.118 227.6)
- OKLab
- oklab(0.68 -0.079 -0.087)
- CIE Lab
- lab(63.25 -22.13 -31.79)
- LCH
- lch(63.25 38.74 235.2)
- CMYK
- cmyk(77% 21% 0% 18%)
Tinte · Ombre · Toni
Tinte
- 4FAFD6
- 66B8DB
- 7BC1E0
- 8FCAE4
- A3D3E9
- B5DCEE
- C8E5F2
- DAEDF6
- EDF6FB
Ombre
- 2990B5
- 227A9B
- 1A6581
- 135168
- 0C3E50
- 062B39
- 031A23
- 010A10
- 000102
Toni
- 40A2C9
- 4C9FC1
- 569BB9
- 5E97B1
- 6594A8
- 6C90A0
- 728C98
- 778890
- 7C8488
Armonie di colore
Complementare +180°
- 31A6D1
Modal
- D38055
≈ Copper Harbor
Analogo -30° +30°
- 31A6D1
Modal
- 00AEB2
≈ Larkspur Blue
- 699AE0
≈ Little Boy Blue
Triadico +120° +240°
- 31A6D1
Modal
- CD79A6
≈ Heartbreaker
- A09D3D
≈ Poplar
Complementare divisa +150° +210°
- 31A6D1
Modal
- D7797D
≈ Juicy Details
- C08E38
≈ Arnica
Tetradico +90° +180° +270°
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.79:1 · APCA Lc 53
Ag
AAASu nero
WCAG 7.50:1 · APCA Lc 48
Miglior colore del testo: #000000
WCAG 7.50:1 (AAA) · APCA Lc 48
Contrast pairs
Frammenti di codice
CSS
:root {
--modal: #31a6d1;
--modal-rgb: 49 166 209;
--modal-oklch: oklch(0.68 0.118 227.6);
}
.element {
color: var(--modal);
background-color: hsl(196 63% 51%);
border-color: oklch(0.68 0.118 227.6);
}Tailwind CSS v4
@theme {
--color-modal: #31a6d1;
--color-modal-50: #d4fcff;
--color-modal-100: #c0f0ff;
--color-modal-200: #9fdefd;
--color-modal-300: #73c3e8;
--color-modal-400: #42acd5;
--color-modal-500: #0094c3;
--color-modal-600: #007da4;
--color-modal-700: #006484;
--color-modal-800: #004a61;
--color-modal-900: #003344;
--color-modal-950: #001f2c;
}SCSS
$modal: #31a6d1;
$modal-rgb: 49, 166, 209;
$modal-light: mix(#fff, $modal, 20%);
$modal-dark: mix(#000, $modal, 20%);
.element {
color: $modal;
box-shadow: 0 0 0 2px rgba($modal, 0.35);
}