Picton Blue

HEX: #45B1E8 | Modern Palette

On White
2.41:1
FAIL
On Black
8.71:1
PASS

Color Specifications

HEX
#45B1E8
RGB
69, 177, 232
HSL
200°, 70% ,90%
CMYK
70.26, 23.71, 0, 9.02

About Picton Blue

Picton Blue (#45B1E8) is a color with RGB(69, 177, 232) and HSL(200.25°, 70.26%, 90.98%). It is commonly associated with Playful moods. In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is #E87C45, which creates strong contrast. Its triadic palette includes #E845B1 and #B1E845. The name comes from Picton (English).

  • HEX: #45B1E8
  • RGB: 69, 177, 232
  • HSL: 200.25°, 70.26%, 90.98%
  • Mood: Playful
  • Style: Cool
  • Use case: Text, Button, Background
  • Complementary color: #E87C45
  • Triadic colors: #E845B1, #B1E845
  • The name comes from Picton (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Picton Blue #45B1E8 is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
 
 
PICTON BLUE
 
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
PICTON BLUE
 
 
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
 
 
PICTON BLUE
 
 
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.
 
 
 
 
 

Color Harmonies

Picton Blue #45B1E8 pairs with #E87C45 as its complementary color, and #E845B1 and #B1E845 in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

PICTON BLUE
Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

PICTON BLUE
Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

PICTON BLUE
Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

PICTON BLUE
Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

PICTON BLUE
Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

PICTON BLUE

Shades & Tints

The shade and tint range for Picton Blue #45B1E8 moves from dark #031017 tones through the base color to lighter #E8F5FC tones, making it useful for depth, hierarchy, and background variation.

PICTON BLUE

Color Characteristics

Mood
Playful
Style
Cool
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #9B9BE9
Protanopia #A9A9E8
Tritanopia #1AB9B9
Achromatopsia #A7A7A7

Frequently Asked Questions

Picton Blue (#45B1E8) is a color with RGB(69, 177, 232) and HSL(200.25°, 70.26%, 90.98%).

#45B1E8 pairs strongly with #E87C45 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#45B1E8 is suitable for Text, Button, Background and works well with Cool styles.

#45B1E8 is commonly associated with Playful.

The name Picton Blue is linked to Picton from English, meaning Refers to Picton, New Zealand, a town known for its scenic Marlborough Sounds..

Name, History & Etymology

Origin Word Picton
Meaning Refers to Picton, New Zealand, a town known for its scenic Marlborough Sounds.
Language English
First Recorded Use Late 20th Century

History

The name 'Picton Blue' is part of a larger trend in digital color naming where colors are often given evocative or geographical names. The X11 color system, developed for the X Window System, included a wide range of named colors to provide a consistent palette across different displays and applications. Many of these names, like 'Picton Blue', do not have a long historical lineage as named colors in art or fashion, but rather originate from the technical need for a standardized digital color vocabulary. The town of Picton, New Zealand, is a port town in the Marlborough Sounds, known for its clear waters and scenic beauty, which likely inspired the association with this particular shade of blue.

First Recorded Use

The specific color 'Picton Blue' (#45b1e8) was named and standardized by the X11 color system, which emerged in the late 1980s and early 1990s. While blue colors existed long before, this specific named shade is tied to digital color systems.

Cultural Associations

As a digital color, 'Picton Blue' is primarily recognized within computing and web design contexts. It's a bright, medium-light blue that evokes feelings of clarity, openness, and often, water or sky. It's not a color with deep historical cultural significance in art or fashion like 'Royal Blue' or 'Navy Blue', but rather a modern, digitally defined shade. Its association with Picton, New Zealand, lends it a sense of natural beauty and a connection to the Pacific.

Similar Named Colors
Vivid Cerulean #00AAEE ΔE 3.16
Cyan (process) #00B7EB ΔE 3.88
Deep Sky Blue #00BFFF ΔE 4.33
Spiro Disco Ball #0FC0FC ΔE 4.60

Code Snippets

/* Background */
.element {
    background-color: #45B1E8;
}

/* Text */
.element {
    color: #45B1E8;
}

/* Border */
.element {
    border: 1px solid #45B1E8;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #45B1E8,
        #F8E3D8
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #45B1E8,
        #F8E3D8
    );
}

// SCSS variable
$picton-blue: #45B1E8;

// With RGB channels (useful for rgba() usage)
$picton-blue-r: 69;
$picton-blue-g: 177;
$picton-blue-b: 232;

// Usage
.element {
    background-color: $picton-blue;
    color: rgba($picton-blue-r, $picton-blue-g, $picton-blue-b, 0.8);
}