Cor nomeada · #007AA5
CG Blue
CG Blue é #007AA5: rgb(0 122 165), hsl(196 100% 32%), oklch(0.544 0.111 232). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · CG Blue color name →
#007AA5
oklch(0.544 0.111 232)
Conversões de cor
- HEX
- #007aa5
- RGB
- rgb(0 122 165)
- HSL
- hsl(196 100% 32%)
- HWB
- hwb(196 0% 35%)
- OKLCH
- oklch(0.544 0.111 232)
- OKLab
- oklab(0.544 -0.068 -0.087)
- CIE Lab
- lab(47.28 -17.17 -31.65)
- LCH
- lch(47.28 36.01 241.5)
- CMYK
- cmyk(100% 26% 0% 35%)
Tons claros · Sombras · Tons
Tons claros
- 3287AE
- 4D94B7
- 65A1C1
- 7CAFCA
- 92BCD3
- A7C9DC
- BDD6E4
- D3E4ED
- E9F1F6
Sombras
- 00698F
- 005979
- 004965
- 003A51
- 002B3D
- 001D2B
- 00101A
- 00050A
- 000101
Tons
- 227BA2
- 337C9E
- 417D9B
- 4C7E97
- 567E93
- 5F7F90
- 687F8C
- 708088
- 788084
Harmonias de cor
Complementar +180°
- 007AA5
CG Blue
- A25B2C
≈ Glazed Ginger
Análoga -30° +30°
- 007AA5
CG Blue
- 007F87
≈ Go Alpha
- 4B6FB0
≈ New Age Blue
Tríade +120° +240°
- 007AA5
CG Blue
- A05277
≈ Sea Fan Fuchsia
- 727618
≈ Medusa’s Snakes
Complementar dividida +150° +210°
- 007AA5
CG Blue
- A75352
≈ The Ego Has Landed
- 906804
≈ Sassy Olive
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
AASobre branco
WCAG 4.85:1 · APCA Lc 73
Ag
FailSobre preto
WCAG 4.32:1 · APCA Lc 29
Melhor cor de texto: #FFFFFF
WCAG 4.85:1 (AA) · APCA Lc 73
Contrast pairs
Trechos de código
CSS
:root {
--cg-blue: #007aa5;
--cg-blue-rgb: 0 122 165;
--cg-blue-oklch: oklch(0.544 0.111 232);
}
.element {
color: var(--cg-blue);
background-color: hsl(196 100% 32%);
border-color: oklch(0.544 0.111 232);
}Tailwind CSS v4
@theme {
--color-cg-blue: #007aa5;
--color-cg-blue-50: #d7fbff;
--color-cg-blue-100: #c5efff;
--color-cg-blue-200: #a5ddfd;
--color-cg-blue-300: #7cc1e8;
--color-cg-blue-400: #51aad5;
--color-cg-blue-500: #1592c3;
--color-cg-blue-600: #187ba4;
--color-cg-blue-700: #146384;
--color-cg-blue-800: #084961;
--color-cg-blue-900: #063344;
--color-cg-blue-950: #001e2c;
}SCSS
$cg-blue: #007aa5;
$cg-blue-rgb: 0, 122, 165;
$cg-blue-light: mix(#fff, $cg-blue, 20%);
$cg-blue-dark: mix(#000, $cg-blue, 20%);
.element {
color: $cg-blue;
box-shadow: 0 0 0 2px rgba($cg-blue, 0.35);
}