Cor nomeada mais próxima · #609FB4
#609FB4
Cor nomeada mais próxima: Surgical
#609FB4 (rgb(96 159 180), hsl(195 36% 54%), oklch(0.668 0.072 221.4)) é mais próxima da cor nomeada Surgical. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#609FB4
oklch(0.668 0.072 221.4)
Conversões de cor
- HEX
- #609fb4
- RGB
- rgb(96 159 180)
- HSL
- hsl(195 36% 54%)
- HWB
- hwb(195 38% 29%)
- OKLCH
- oklch(0.668 0.072 221.4)
- OKLab
- oklab(0.668 -0.054 -0.047)
- CIE Lab
- lab(61.85 -16.79 -17.64)
- LCH
- lch(61.85 24.36 226.4)
- CMYK
- cmyk(47% 12% 0% 29%)
Tons claros · Sombras · Tons
Tons claros
- 71A8BB
- 81B2C3
- 91BBCA
- A0C5D2
- B0CED9
- C0D8E1
- CFE2E8
- DFEBF0
- EFF5F7
Sombras
- 528A9C
- 457585
- 38616E
- 2C4D58
- 203B44
- 152930
- 0A181D
- 03090C
- 000102
Tons
- 649CAF
- 6899AA
- 6C96A4
- 70939F
- 73909A
- 768D95
- 798A90
- 7B868A
- 7E8385
Harmonias de cor
Complementar +180°
- 609FB4
Surgical
- BB8672
≈ Big Cypress
Análoga -30° +30°
- 609FB4
Surgical
- 5CA39F
≈ Aqua Rapids
- 7498C0
≈ Blue Beauty
Tríade +120° +240°
- 609FB4
Surgical
- B483A2
≈ Opera Mauve
- 9E9662
≈ Hiking
Complementar dividida +150° +210°
- 609FB4
Surgical
- BC8289
≈ Lipstick Pink
- B18E63
≈ Brown Rabbit
Tétrade +90° +180° +270°
- 609FB4
Surgical
- A388B5
≈ Kismet
- BB8672
≈ Big Cypress
- 859E70
≈ Sleepy Hollow
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.95:1 · APCA Lc 56
Ag
AAASobre preto
WCAG 7.11:1 · APCA Lc 46
Melhor cor de texto: #000000
WCAG 7.11:1 (AAA) · APCA Lc 46
Contrast pairs
Trechos de código
CSS
:root {
--surgical: #609fb4;
--surgical-rgb: 96 159 180;
--surgical-oklch: oklch(0.668 0.072 221.4);
}
.element {
color: var(--surgical);
background-color: hsl(195 36% 54%);
border-color: oklch(0.668 0.072 221.4);
}Tailwind CSS v4
@theme {
--color-surgical: #609fb4;
--color-surgical-50: #e0faff;
--color-surgical-100: #cfeefa;
--color-surgical-200: #b4dceb;
--color-surgical-300: #8fc0d3;
--color-surgical-400: #6da9bd;
--color-surgical-500: #4a91a8;
--color-surgical-600: #407b8e;
--color-surgical-700: #336272;
--color-surgical-800: #234853;
--color-surgical-900: #17323a;
--color-surgical-950: #081e24;
}SCSS
$surgical: #609fb4;
$surgical-rgb: 96, 159, 180;
$surgical-light: mix(#fff, $surgical, 20%);
$surgical-dark: mix(#000, $surgical, 20%);
.element {
color: $surgical;
box-shadow: 0 0 0 2px rgba($surgical, 0.35);
}