Cor nomeada · #9BBCE4
Gallery Blue
Gallery Blue é #9BBCE4: rgb(155 188 228), hsl(213 57% 75%), oklch(0.785 0.068 253.5). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Gallery Blue color name →
#9BBCE4
oklch(0.785 0.068 253.5)
Conversões de cor
- HEX
- #9bbce4
- RGB
- rgb(155 188 228)
- HSL
- hsl(213 57% 75%)
- HWB
- hwb(213 61% 11%)
- OKLCH
- oklch(0.785 0.068 253.5)
- OKLab
- oklab(0.785 -0.019 -0.065)
- CIE Lab
- lab(74.85 -4.47 -23.94)
- LCH
- lch(74.85 24.35 259.4)
- CMYK
- cmyk(32% 18% 0% 11%)
Tons claros · Sombras · Tons
Tons claros
- A5C3E7
- AFC9EA
- B9D0ED
- C3D7EF
- CCDDF2
- D7E4F5
- E1EBF7
- EBF2FA
- F5F8FD
Sombras
- 86A3C6
- 728BA9
- 5E738D
- 4B5D72
- 394758
- 28323F
- 181F28
- 090D12
- 010203
Tons
- 98B6DA
- 96B0CF
- 93AAC5
- 91A4BB
- 8E9EB1
- 8B98A7
- 88929D
- 868C93
- 83868A
Harmonias de cor
Complementar +180°
- 9BBCE4
Gallery Blue
- D4B389
≈ Summerwood
Análoga -30° +30°
- 9BBCE4
Gallery Blue
- 89C3D9
≈ Dolphin
- B3B4E4
≈ Beloved
Tríade +120° +240°
- 9BBCE4
Gallery Blue
- E1A8AC
≈ Raspberry Lemonade
- A8C397
≈ Heartland Frosty
Complementar dividida +150° +210°
- 9BBCE4
Gallery Blue
- DFAC96
≈ Arizona Dust
- C0BB89
≈ Goody Two Shoes
Tétrade +90° +180° +270°
- 9BBCE4
Gallery Blue
- D9A8C4
≈ Lofty Delight
- D4B389
≈ Summerwood
- 91C7AD
≈ Hellion Green
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.96:1 · APCA Lc 38
Ag
AAASobre preto
WCAG 10.70:1 · APCA Lc 65
Melhor cor de texto: #000000
WCAG 10.70:1 (AAA) · APCA Lc 65
Contrast pairs
Trechos de código
CSS
:root {
--gallery-blue: #9bbce4;
--gallery-blue-rgb: 155 188 228;
--gallery-blue-oklch: oklch(0.785 0.068 253.5);
}
.element {
color: var(--gallery-blue);
background-color: hsl(213 57% 75%);
border-color: oklch(0.785 0.068 253.5);
}Tailwind CSS v4
@theme {
--color-gallery-blue: #9bbce4;
--color-gallery-blue-50: #e9f7ff;
--color-gallery-blue-100: #d9e9ff;
--color-gallery-blue-200: #c2d6f1;
--color-gallery-blue-300: #a1bada;
--color-gallery-blue-400: #83a1c6;
--color-gallery-blue-500: #6689b2;
--color-gallery-blue-600: #577497;
--color-gallery-blue-700: #455d79;
--color-gallery-blue-800: #314459;
--color-gallery-blue-900: #212f3e;
--color-gallery-blue-950: #101b28;
}SCSS
$gallery-blue: #9bbce4;
$gallery-blue-rgb: 155, 188, 228;
$gallery-blue-light: mix(#fff, $gallery-blue, 20%);
$gallery-blue-dark: mix(#000, $gallery-blue, 20%);
.element {
color: $gallery-blue;
box-shadow: 0 0 0 2px rgba($gallery-blue, 0.35);
}