Metallic Seaweed

HEX: #0A7E8C | Modern Palette

On White
4.80:1
PASS
On Black
4.38:1
FAIL

Color Specifications

HEX
#0A7E8C
RGB
10, 126, 140
HSL
186°, 92% ,54%
CMYK
92.86, 10, 0, 45.1

About Metallic Seaweed

Metallic Seaweed (#0A7E8C) is a color with RGB(10, 126, 140) and HSL(186.46°, 92.86%, 54.9%). 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 #8C180A, which creates strong contrast. Its triadic palette includes #8C0A7E and #7E8C0A.

  • HEX: #0A7E8C
  • RGB: 10, 126, 140
  • HSL: 186.46°, 92.86%, 54.9%
  • Mood: Bold
  • Style: Vivid, Cool
  • Use case: Text, Button, Accent
  • Complementary color: #8C180A
  • Triadic colors: #8C0A7E, #7E8C0A

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Metallic Seaweed #0A7E8C 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.
 
METALLIC SEAWEED
 
 
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
METALLIC SEAWEED
 
 
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

Metallic Seaweed #0A7E8C pairs with #8C180A as its complementary color, and #8C0A7E and #7E8C0A 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.

METALLIC SEAWEED
Analogous

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

METALLIC SEAWEED
Triadic

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

METALLIC SEAWEED
Split-Complementary

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

METALLIC SEAWEED
Tetradic (Square)

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

METALLIC SEAWEED
Monochromatic

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

METALLIC SEAWEED

Shades & Tints

The shade and tint range for Metallic Seaweed #0A7E8C moves from dark #021518 tones through the base color to lighter #E7FBFD tones, making it useful for depth, hierarchy, and background variation.

METALLIC SEAWEED

Color Characteristics

Mood
Bold
Style
Vivid Cool
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #6C6C8D
Protanopia #78788C
Tritanopia #008080
Achromatopsia #727272

Frequently Asked Questions

Metallic Seaweed (#0A7E8C) is a color with RGB(10, 126, 140) and HSL(186.46°, 92.86%, 54.9%).

#0A7E8C pairs strongly with #8C180A as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

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

#0A7E8C is commonly associated with Bold.

Similar Named Colors
Ming #36747D ΔE 4.74
Teal Blue #367588 ΔE 6.00
Teal #008080 ΔE 6.12
Skobeloff #007474 ΔE 7.16

Code Snippets

/* Background */
.element {
    background-color: #0A7E8C;
}

/* Text */
.element {
    color: #0A7E8C;
}

/* Border */
.element {
    border: 1px solid #0A7E8C;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #0A7E8C,
        #F73821
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #0A7E8C,
        #F73821
    );
}

// SCSS variable
$metallic-seaweed: #0A7E8C;

// With RGB channels (useful for rgba() usage)
$metallic-seaweed-r: 10;
$metallic-seaweed-g: 126;
$metallic-seaweed-b: 140;

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