Color con nombre · #0173BB
Peek-A-Boo Blue
Peek-A-Boo Blue es #0173BB: rgb(1 115 187), hsl(203 99% 37%), oklch(0.54 0.141 246.8). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Blue mean? → · Peek-A-Boo Blue color name →
#0173BB
oklch(0.54 0.141 246.8)
Conversiones de color
- HEX
- #0173bb
- RGB
- rgb(1 115 187)
- HSL
- hsl(203 99% 37%)
- HWB
- hwb(203 0% 27%)
- OKLCH
- oklch(0.54 0.141 246.8)
- OKLab
- oklab(0.54 -0.056 -0.13)
- CIE Lab
- lab(46.06 -6.41 -46.3)
- LCH
- lch(46.06 46.74 262.1)
- CMYK
- cmyk(99% 39% 0% 27%)
Tintes · Sombras · Tonos
Tintes
- 3081C3
- 4B8FCA
- 639DD1
- 7AABD8
- 90B9DF
- A6C7E6
- BCD5EC
- D2E3F3
- E9F1F9
Sombras
- 0163A2
- 01548A
- 004573
- 00365C
- 002846
- 001B32
- 000F1F
- 00050D
- 000102
Tonos
- 2175B6
- 3277B0
- 3F79AA
- 4A7AA5
- 547B9F
- 5E7D99
- 677E93
- 707F8D
- 787F87
Armonías de color
Complementario +180°
- 0173BB
Peek-A-Boo Blue
- 9C5E00
≈ Soft Tone Ink
Análogo -30° +30°
- 0173BB
Peek-A-Boo Blue
- 007C93
≈ Mosaic Blue
- 5B63BF
≈ Bluish Purple Anemone
Triádico +120° +240°
- 0173BB
Peek-A-Boo Blue
- AF4561
≈ Hot
- 597C00
≈ Avocado
Complementario dividido +150° +210°
- 0173BB
Peek-A-Boo Blue
- B14A2D
≈ Kabacha Brown
- 816E00
≈ Sunlit Kelp Green
Tetrádico +90° +180° +270°
- 0173BB
Peek-A-Boo Blue
- A04A8C
≈ Viva Magenta
- 9C5E00
≈ Soft Tone Ink
- 00844F
≈ Dark Emerald
Contraste y accesibilidad
Ag
AASobre blanco
WCAG 5.03:1 · APCA Lc 74
Ag
FailSobre negro
WCAG 4.17:1 · APCA Lc 28
Mejor color de texto: #FFFFFF
WCAG 5.03:1 (AA) · APCA Lc 74
Contrast pairs
Fragmentos de código
CSS
:root {
--peek-a-boo-blue: #0173bb;
--peek-a-boo-blue-rgb: 1 115 187;
--peek-a-boo-blue-oklch: oklch(0.54 0.141 246.8);
}
.element {
color: var(--peek-a-boo-blue);
background-color: hsl(203 99% 37%);
border-color: oklch(0.54 0.141 246.8);
}Tailwind CSS v4
@theme {
--color-peek-a-boo-blue: #0173bb;
--color-peek-a-boo-blue-50: #d7f9ff;
--color-peek-a-boo-blue-100: #c4edff;
--color-peek-a-boo-blue-200: #a5daff;
--color-peek-a-boo-blue-300: #7cbdfc;
--color-peek-a-boo-blue-400: #50a5ed;
--color-peek-a-boo-blue-500: #178bdd;
--color-peek-a-boo-blue-600: #1976bb;
--color-peek-a-boo-blue-700: #145f96;
--color-peek-a-boo-blue-800: #06466f;
--color-peek-a-boo-blue-900: #05304e;
--color-peek-a-boo-blue-950: #001c34;
}SCSS
$peek-a-boo-blue: #0173bb;
$peek-a-boo-blue-rgb: 1, 115, 187;
$peek-a-boo-blue-light: mix(#fff, $peek-a-boo-blue, 20%);
$peek-a-boo-blue-dark: mix(#000, $peek-a-boo-blue, 20%);
.element {
color: $peek-a-boo-blue;
box-shadow: 0 0 0 2px rgba($peek-a-boo-blue, 0.35);
}