Named color · #0C608E
Pontoon
Pontoon is #0C608E: rgb(12 96 142), hsl(201 84% 30%), oklch(0.467 0.104 240.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Pontoon color name →
#0C608E
oklch(0.467 0.104 240.6)
Color conversions
- HEX
- #0c608e
- RGB
- rgb(12 96 142)
- HSL
- hsl(201 84% 30%)
- HWB
- hwb(201 5% 44%)
- OKLCH
- oklch(0.467 0.104 240.6)
- OKLab
- oklab(0.467 -0.051 -0.09)
- CIE Lab
- lab(38.03 -10.07 -32.48)
- LCH
- lch(38.03 34.01 252.8)
- CMYK
- cmyk(92% 32% 0% 44%)
Tints · Shades · Tones
Tints
- 2F6F99
- 487FA5
- 5F8EB0
- 769EBB
- 8CAEC7
- A3BED2
- B9CEDD
- D0DEE9
- E7EEF4
Shades
- 09527B
- 064568
- 043856
- 032C44
- 022034
- 011524
- 000A15
- 000307
- 000001
Tones
- 22648D
- 30678C
- 3C6B8B
- 476E8A
- 517188
- 5B7487
- 657785
- 6E7A84
- 777D82
Color harmonies
Complementary +180°
- 0C608E
Pontoon
- 834A0B
≈ Dried Mustard
Analogous -30° +30°
- 0C608E
Pontoon
- 006673
≈ Bankson Lake
- 445594
≈ Crushed Velvet
Triadic +120° +240°
- 0C608E
Pontoon
- 873E57
≈ Ancient Royal Banner
- 526211
≈ Camouflage Green
Split-complementary +150° +210°
- 0C608E
Pontoon
- 8B4135
≈ Burnt Henna
- 6E5700
≈ Ayahuasca Vine
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 6.81:1 · APCA Lc 83
Ag
FailOn black
WCAG 3.07:1 · APCA Lc 19
Best text color: #FFFFFF
WCAG 6.81:1 (AA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--pontoon: #0c608e;
--pontoon-rgb: 12 96 142;
--pontoon-oklch: oklch(0.467 0.104 240.6);
}
.element {
color: var(--pontoon);
background-color: hsl(201 84% 30%);
border-color: oklch(0.467 0.104 240.6);
}Tailwind CSS v4
@theme {
--color-pontoon: #0c608e;
--color-pontoon-50: #dcfaff;
--color-pontoon-100: #cbedff;
--color-pontoon-200: #aedafe;
--color-pontoon-300: #88bee8;
--color-pontoon-400: #62a6d6;
--color-pontoon-500: #3b8ec4;
--color-pontoon-600: #3378a5;
--color-pontoon-700: #296085;
--color-pontoon-800: #1a4762;
--color-pontoon-900: #113145;
--color-pontoon-950: #031d2d;
}SCSS
$pontoon: #0c608e;
$pontoon-rgb: 12, 96, 142;
$pontoon-light: mix(#fff, $pontoon, 20%);
$pontoon-dark: mix(#000, $pontoon, 20%);
.element {
color: $pontoon;
box-shadow: 0 0 0 2px rgba($pontoon, 0.35);
}