Catalina Blue

HEX: #062A78 | Modern Palette

On White
13.04:1
PASS
On Black
1.61:1
FAIL

Color Specifications

HEX
#062A78
RGB
6, 42, 120
HSL
221°, 95% ,47%
CMYK
95, 65, 0, 52.94

About Catalina Blue

Catalina Blue (#062A78) is a color with RGB(6, 42, 120) and HSL(221.05°, 95%, 47.06%). It is commonly associated with Bold moods. In design, it fits Vivid, Cool styles and is suitable for Text, Button, Accent. Its complementary color is #785406, which creates strong contrast. Its triadic palette includes #78062A and #2A7806. The name comes from Catalina Blue (English).

  • HEX: #062A78
  • RGB: 6, 42, 120
  • HSL: 221.05°, 95%, 47.06%
  • Mood: Bold
  • Style: Vivid, Cool
  • Use case: Text, Button, Accent
  • Complementary color: #785406
  • Triadic colors: #78062A, #2A7806
  • The name comes from Catalina Blue (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Catalina Blue #062A78 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.
 
CATALINA BLUE
 
 
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
CATALINA BLUE
 
 
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
 
 
 
 
 
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.
 
 
 
 
 

Color Harmonies

Catalina Blue #062A78 pairs with #785406 as its complementary color, and #78062A and #2A7806 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.

CATALINA BLUE
Analogous

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

CATALINA BLUE
Triadic

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

CATALINA BLUE
Split-Complementary

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

CATALINA BLUE
Tetradic (Square)

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

CATALINA BLUE
Monochromatic

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

CATALINA BLUE

Shades & Tints

The shade and tint range for Catalina Blue #062A78 moves from dark #010918 tones through the base color to lighter #E7EEFE tones, making it useful for depth, hierarchy, and background variation.

CATALINA BLUE

Color Characteristics

Mood
Bold
Style
Vivid Cool
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #232378
Protanopia #282878
Tritanopia #003B3B
Achromatopsia #313131

Frequently Asked Questions

Catalina Blue (#062A78) is a color with RGB(6, 42, 120) and HSL(221.05°, 95%, 47.06%).

#062A78 pairs strongly with #785406 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#062A78 is suitable for Text, Button, Accent and works well with Vivid, Cool styles.

#062A78 is commonly associated with Bold.

The name Catalina Blue is linked to Catalina Blue from English, meaning A specific shade of blue, often associated with the waters around Santa Catalina Island, California..

Name, History & Etymology

Origin Word Catalina Blue
Meaning A specific shade of blue, often associated with the waters around Santa Catalina Island, California.
Language English
First Recorded Use 20th Century

History

The name 'Catalina Blue' is a descriptive color name, not a historical term with a deep etymological root beyond its geographical reference. It emerged as a way to describe a particular vibrant, deep blue, reminiscent of the clear, deep waters surrounding Santa Catalina Island, off the coast of Southern California. The island itself has a rich history, from indigenous inhabitants to Spanish exploration, ranching, and its development into a major tourist resort by the Wrigley family in the early 20th century. As the island's popularity grew, so did the association of its natural beauty, including the color of its waters, with various products and descriptive terms. The color name likely gained traction in industries like fashion, paint, and interior design to evoke a sense of coastal beauty and tranquility.

First Recorded Use

Likely mid-20th century onwards, as the island became a popular tourist destination and its colors inspired various products and names.

Cultural Associations

Catalina Island is a significant cultural landmark in Southern California, known for its natural beauty, marine life, and as a popular destination for recreation and tourism. The 'Catalina Blue' color evokes images of clear ocean waters, sunny skies, and a relaxed, upscale coastal lifestyle. It's often used in contexts that aim to convey serenity, depth, and a connection to the ocean. It can be seen in nautical themes, resort wear, and home decor that leans towards a coastal aesthetic.

Similar Named Colors
Saint Patrick Blue #23297A ΔE 3.09
Royal Blue #002366 ΔE 3.14
Air Force Blue (USAF) #00308F ΔE 3.58
Resolution Blue #002387 ΔE 3.83

Code Snippets

/* Background */
.element {
    background-color: #062A78;
}

/* Text */
.element {
    color: #062A78;
}

/* Border */
.element {
    border: 1px solid #062A78;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #062A78,
        #EAA206
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #062A78,
        #EAA206
    );
}

// SCSS variable
$catalina-blue: #062A78;

// With RGB channels (useful for rgba() usage)
$catalina-blue-r: 6;
$catalina-blue-g: 42;
$catalina-blue-b: 120;

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