Colore con nome · #3C6A9D
Star Sapphire
Star Sapphire è #3C6A9D: rgb(60 106 157), hsl(212 45% 43%), oklch(0.515 0.096 252.3). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Star Sapphire color name →
#3C6A9D
oklch(0.515 0.096 252.3)
Conversioni di colore
- HEX
- #3c6a9d
- RGB
- rgb(60 106 157)
- HSL
- hsl(212 45% 43%)
- HWB
- hwb(212 24% 38%)
- OKLCH
- oklch(0.515 0.096 252.3)
- OKLab
- oklab(0.515 -0.029 -0.091)
- CIE Lab
- lab(43.33 -3.74 -32.99)
- LCH
- lch(43.33 33.2 263.5)
- CMYK
- cmyk(62% 32% 0% 38%)
Tinte · Ombre · Toni
Tinte
- 4F78A7
- 6287B1
- 7595BB
- 88A4C5
- 9BB3CF
- AEC2D8
- C2D1E2
- D6E0EC
- EAEFF5
Ombre
- 335B88
- 2A4D73
- 213F5F
- 19314C
- 11243A
- 0A1828
- 040D18
- 010409
- 000001
Toni
- 446D9A
- 4B6F98
- 527195
- 597492
- 607690
- 66788D
- 6D7A8A
- 737C87
- 7A7E83
Armonie di colore
Complementare +180°
- 3C6A9D
Star Sapphire
- 895D1E
≈ Kumera
Analogo -30° +30°
- 3C6A9D
Star Sapphire
- 00738F
≈ Ocean Mirage
- 5F609D
≈ Violet Storm
Triadico +120° +240°
- 3C6A9D
Star Sapphire
- 964F58
≈ Crantini
- 527336
≈ Deep Pine
Complementare divisa +150° +210°
- 3C6A9D
Star Sapphire
- 955339
≈ Tonicha
- 72691C
≈ Brown Green
Tetradico +90° +180° +270°
- 3C6A9D
Star Sapphire
- 8D5077
≈ Sugar Plum
- 895D1E
≈ Kumera
- 267857
≈ Opal Green
Contrasto e accessibilità
Ag
AASu bianco
WCAG 5.61:1 · APCA Lc 78
Ag
FailSu nero
WCAG 3.74:1 · APCA Lc 24
Miglior colore del testo: #FFFFFF
WCAG 5.61:1 (AA) · APCA Lc 78
Contrast pairs
Frammenti di codice
CSS
:root {
--star-sapphire: #3c6a9d;
--star-sapphire-rgb: 60 106 157;
--star-sapphire-oklch: oklch(0.515 0.096 252.3);
}
.element {
color: var(--star-sapphire);
background-color: hsl(212 45% 43%);
border-color: oklch(0.515 0.096 252.3);
}Tailwind CSS v4
@theme {
--color-star-sapphire: #3c6a9d;
--color-star-sapphire-50: #e3f7ff;
--color-star-sapphire-100: #d3eaff;
--color-star-sapphire-200: #b9d7fd;
--color-star-sapphire-300: #96bae8;
--color-star-sapphire-400: #75a2d6;
--color-star-sapphire-500: #5589c4;
--color-star-sapphire-600: #4974a5;
--color-star-sapphire-700: #3a5d85;
--color-star-sapphire-800: #274462;
--color-star-sapphire-900: #1a2f45;
--color-star-sapphire-950: #0b1c2d;
}SCSS
$star-sapphire: #3c6a9d;
$star-sapphire-rgb: 60, 106, 157;
$star-sapphire-light: mix(#fff, $star-sapphire, 20%);
$star-sapphire-dark: mix(#000, $star-sapphire, 20%);
.element {
color: $star-sapphire;
box-shadow: 0 0 0 2px rgba($star-sapphire, 0.35);
}