Named color · #026B5D
Pacific Queen
Pacific Queen is #026B5D: rgb(2 107 93), hsl(172 96% 21%), oklch(0.473 0.086 179.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Pacific Queen color name →
#026B5D
oklch(0.473 0.086 179.5)
Color conversions
- HEX
- #026b5d
- RGB
- rgb(2 107 93)
- HSL
- hsl(172 96% 21%)
- HWB
- hwb(172 1% 58%)
- OKLCH
- oklch(0.473 0.086 179.5)
- OKLab
- oklab(0.473 -0.086 0.001)
- CIE Lab
- lab(39.94 -30.05 0.04)
- LCH
- lch(39.94 30.05 179.9)
- CMYK
- cmyk(98% 0% 13% 58%)
Tints · Shades · Tones
Tints
- 2E796C
- 48877B
- 60968A
- 77A49A
- 8DB3AA
- A4C2BB
- BAD1CB
- D1E0DC
- E8F0EE
Shades
- 015C50
- 014E43
- 013F37
- 00322A
- 00251F
- 001814
- 000D0A
- 000403
- 000000
Tones
- 1F6D60
- 307064
- 3C7267
- 48746B
- 52766E
- 5C7872
- 657A75
- 6E7C79
- 777E7C
Color harmonies
Complementary +180°
- 026B5D
Pacific Queen
- 82465A
≈ Wild Plum
Analogous -30° +30°
- 026B5D
Pacific Queen
- 356941
≈ Genever Green
- 006875
≈ Bankson Lake
Triadic +120° +240°
- 026B5D
Pacific Queen
- 635085
≈ Freshly Purpleized
- 7F4F25
≈ Milk Chocolate
Split-complementary +150° +210°
- 026B5D
Pacific Queen
- 764973
≈ Purple Passion
- 85483F
≈ Spice of Life
Tetradic +90° +180° +270°
- 026B5D
Pacific Queen
- 48598C
≈ Gem
- 82465A
≈ Wild Plum
- 6F5918
≈ Hot Mustard
Contrast & accessibility
Ag
AAOn white
WCAG 6.43:1 · APCA Lc 81
Ag
FailOn black
WCAG 3.26:1 · APCA Lc 20
Best text color: #FFFFFF
WCAG 6.43:1 (AA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--pacific-queen: #026b5d;
--pacific-queen-rgb: 2 107 93;
--pacific-queen-oklch: oklch(0.473 0.086 179.5);
}
.element {
color: var(--pacific-queen);
background-color: hsl(172 96% 21%);
border-color: oklch(0.473 0.086 179.5);
}Tailwind CSS v4
@theme {
--color-pacific-queen: #026b5d;
--color-pacific-queen-50: #dcfef7;
--color-pacific-queen-100: #caf2ea;
--color-pacific-queen-200: #ade1d7;
--color-pacific-queen-300: #85c6ba;
--color-pacific-queen-400: #61afa0;
--color-pacific-queen-500: #379988;
--color-pacific-queen-600: #308173;
--color-pacific-queen-700: #26675c;
--color-pacific-queen-800: #1b4c42;
--color-pacific-queen-900: #12352e;
--color-pacific-queen-950: #03201a;
}SCSS
$pacific-queen: #026b5d;
$pacific-queen-rgb: 2, 107, 93;
$pacific-queen-light: mix(#fff, $pacific-queen, 20%);
$pacific-queen-dark: mix(#000, $pacific-queen, 20%);
.element {
color: $pacific-queen;
box-shadow: 0 0 0 2px rgba($pacific-queen, 0.35);
}