Colore con nome · #0173BB
Peek-A-Boo Blue
Peek-A-Boo Blue è #0173BB: rgb(1 115 187), hsl(203 99% 37%), oklch(0.54 0.141 246.8). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Peek-A-Boo Blue color name →
#0173BB
oklch(0.54 0.141 246.8)
Conversioni di colore
- 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%)
Tinte · Ombre · Toni
Tinte
- 3081C3
- 4B8FCA
- 639DD1
- 7AABD8
- 90B9DF
- A6C7E6
- BCD5EC
- D2E3F3
- E9F1F9
Ombre
- 0163A2
- 01548A
- 004573
- 00365C
- 002846
- 001B32
- 000F1F
- 00050D
- 000102
Toni
- 2175B6
- 3277B0
- 3F79AA
- 4A7AA5
- 547B9F
- 5E7D99
- 677E93
- 707F8D
- 787F87
Armonie di colore
Complementare +180°
- 0173BB
Peek-A-Boo Blue
- 9C5E00
≈ Soft Tone Ink
Analogo -30° +30°
- 0173BB
Peek-A-Boo Blue
- 007C93
≈ Mosaic Blue
- 5B63BF
≈ Bluish Purple Anemone
Triadico +120° +240°
- 0173BB
Peek-A-Boo Blue
- AF4561
≈ Hot
- 597C00
≈ Avocado
Complementare divisa +150° +210°
- 0173BB
Peek-A-Boo Blue
- B14A2D
≈ Kabacha Brown
- 816E00
≈ Sunlit Kelp Green
Tetradico +90° +180° +270°
- 0173BB
Peek-A-Boo Blue
- A04A8C
≈ Viva Magenta
- 9C5E00
≈ Soft Tone Ink
- 00844F
≈ Dark Emerald
Contrasto e accessibilità
Ag
AASu bianco
WCAG 5.03:1 · APCA Lc 74
Ag
FailSu nero
WCAG 4.17:1 · APCA Lc 28
Miglior colore del testo: #FFFFFF
WCAG 5.03:1 (AA) · APCA Lc 74
Contrast pairs
Frammenti di codice
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);
}