Skip to main content

Robin Egg Blue

#00CCCC·cyan family·WCAG AAA

Tints & Shades

50

100

200

300

400

500

600

700

800

900

Scale from white (50) through Robin Egg Blue (500) to black (900), interpolated in Lab color space.

Color Values

HEX
#00CCCC
RGB
rgb(0, 204, 204)
HSL
hsl(180, 100%, 40%)
OKLCH
oklch(0.765 0.131 195)
CMYK
cmyk(100%, 0%, 0%, 20%)
Luminance:0.4755
CSS var:--color-robin-egg-blue
Tailwind:bg-[#00CCCC]

Accessibility

Score: 48/100

On White (#FFF)

2:1

Fail

On Black (#000)

10.51:1

AAA

On Light Gray (#F5F5F5)

1.83:1

Fail

Best text color on this background:

black10.51:1
Open in Contrast Checker →

Design Applications

Background

background-color: #00CCCC

Text Color

color: #00CCCC

bg-[#00CCCC] text-[#000000]

Accent border card component

border-left: 4px solid #00CCCC

Color Meaning & Psychology

Cyan sits between blue and green at the edge of visible light and is the color the eye uses to adjust from warm to cool light. It feels technological, clean, and forward-thinking. In printing, cyan is a primary process color (CMYK), giving it an association with professional reproduction and precision. In design, bright cyan signals digital interfaces, clean tech, and innovation. Lighter cyans feel fresh and airy; deeper cyans approach teal's sophistication. Cyan's primary cultural associations are ocean, ice, and digital displays. It is widely used in healthcare technology brands because it combines blue's trust with green's health connotations without the blandness of either on their own. Its deeper, richer tone gives it gravitas and sophistication, making it well-suited for primary brand colors, typography, and contexts where authority matters.

Industry Usage

Common contexts and industries where Robin Egg Blue is applied in professional design.

  • Digital technology and software products
  • Water sports and aquatic brands
  • Clean energy and sustainability companies
  • Healthcare data visualization tools
  • Modern media and streaming services
  • Virtual reality and immersive tech brands
  • Aerospace and precision technology
  • Clinical data and diagnostic imaging products

Accessibility Considerations

Normal Text

Fails AA

4.5:1 minimum required

Large Text

Fails AA Large

3:1 minimum required

UI Components

Check contrast

3:1 for non-text UI

Robin Egg Blue is a light color. Use black (#000000) text on top of it for maximum readability (10.51:1). Avoid white text on this background.

CSS & Code Examples

Background

background-color: #00CCCC;

Text

color: #00CCCC;

Border

border: 2px solid #00CCCC;

Box Shadow

box-shadow: 0 4px 20px #00CCCC40;

Gradient

background: linear-gradient(135deg, #00CCCC, #64ffff);

Tailwind-style

--color-robin-egg-blue: #00CCCC;

Tailwind CSS Utilities

Use arbitrary value syntax in Tailwind CSS to apply Robin Egg Blue without a custom config.

Background

bg-[#00CCCC]

Text

text-[#00CCCC]

Border

border-[#00CCCC]

Ring

ring-[#00CCCC]

Fill

fill-[#00CCCC]

From (gradient)

from-[#00CCCC]

Via (gradient)

via-[#00CCCC]

To (gradient)

to-[#00CCCC]

Design Tokens

Ready-to-use Robin Egg Blue design token in CSS custom properties, SCSS, Tailwind v3/v4, and JSON formats.

CSS Custom Properties

:root {
  --color-robin-egg-blue: #00CCCC;
  --color-robin-egg-blue-rgb: 0, 204, 204;
  --color-robin-egg-blue-hsl: 180, 100%, 40%;
}

SCSS Variables

$color-robin-egg-blue: #00CCCC;
$color-robin-egg-blue-rgb: 0, 204, 204;
$color-robin-egg-blue-hsl: 180, 100%, 40%;

Tailwind v3 Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'robin-egg-blue': '#00CCCC',
      },
    },
  },
};

Tailwind v4 (@theme)

/* tailwind.css */
@theme {
  --color-robin-egg-blue: #00CCCC;
}

JSON Design Token (W3C format)

{
  "robin-egg-blue": {
    "value": "#00CCCC",
    "type": "color",
    "description": "Robin Egg Blue — #00CCCC"
  }
}

What Does Robin Egg Blue Mean? Color Psychology & Cultural Symbolism

Robin Egg Blue (#00CCCC) registers as one of the most distinctly technological colors in the human visual system—a quality that traces to its role as one of the three primary colors of additive light (RGB). Design uses this association to project technology: a quality that feels native to screens, data, and precision systems.

  • Across color psychology research, cyan consistently tests high for "precision" associations, making Robin Egg Blue a reliable vehicle for technology in cross-demographic audiences.
  • Brand designers draw on cyan-family tones to project modernity and innovation—values that Robin Egg Blue communicates in a medium key.
  • At 100% saturation, Robin Egg Blue reads as vivid—Pure vivid cyan is the color of screens, lasers, and science fiction—among the most technologically coded colors in human design vocabulary.
  • Robin Egg Blue's medium lightness (40%) shifts its psychological register: a balanced mid-tone that embodies clarity, technology, freshness, and precision at its most direct.

Robin Egg Blue is where technology and clarity meet—use it where you need users to feel precisely oriented and forward-looking.

How to Use Robin Egg Blue in Design: Applications, Pairings & Best Practices

Robin Egg Blue is a natural fit for any design system that wants to signal technology without falling back on blue. It adds a freshness and precision that differentiates tech-forward brands from their more conventional competitors.

  • Avoid: traditional or heritage brands, warm and artisanal contexts, and food packaging (no natural cyan foods).
  • Color harmonies: Robin Egg Blue's complementary color creates a high-energy split ideal for promotional design; its analogous palette (±30° hue) builds cohesive, monochromatic sophistication.
  • Proportional use: Robin Egg Blue's vivid saturation (100%) means small applications—accents, highlights, icons—deliver maximum impact without visual fatigue. Reserve large-scale use for intentional brand moments.
  • Robin Egg Blue creates strong legibility with black text overlays (10.5:1 contrast ratio), making it a reliable background or surface color in design systems
  • Typography: Robin Egg Blue as text requires a dark background; its 40% lightness means it provides 2.0:1 contrast on white, not meeting WCAG AA.

Robin Egg Blue is where technology and clarity meet—use it where you need users to feel precisely oriented and forward-looking.

Robin Egg Blue Accessibility: WCAG Contrast Ratios, Color Blindness & Inclusive Design

Robin Egg Blue (#00CCCC) achieves a 10.51:1 contrast ratio with black text, surpassing the WCAG 2.1 AAA threshold of 7:1. This exceptional contrast qualifies it for body text, UI components at any size, and all accessibility-sensitive interface contexts. Relative luminance: 47.5%.

  • As text on white (#FFFFFF): 2.00:1 — Fail
  • As text on black (#000000): 10.51:1 — AAA ✓
  • Best text color on Robin Egg Blue background: Black (#000000) at 10.51:1
  • WCAG 2.1 luminance: 47.5% — above-median luminance—it reads as a light to mid-tone background, compatible with dark text while retaining color personality
  • Robin Egg Blue qualifies for all text sizes including small body copy (AAA).
  • Color blindness consideration: tritanopia (blue-yellow color blindness, ~0.003% of population) may affect how this color reads. While rare, for maximum accessibility supplement color signals with text or icon indicators in critical states.

Always verify Robin Egg Blue at its final intended size and weight using a real contrast checker—font weight and rendering environment affect perceived legibility beyond what raw ratios capture.

Robin Egg Blue in Industry: Branding, Design & Market Applications

Across industry research, cyan-family tones consistently outperform competitors in categories built on clarity, technology, freshness, and precision. Robin Egg Blue is a medium expression of this advantage—best positioned in Technology & Software and adjacent markets.

  • Technology & Software: Cyan's additive light origins make it inherently digital—it's literally the color of screens. Tech brands use it to signal cutting-edge, screen-native products and the precision of digital systems. (examples: Apple, Microsoft, Salesforce) Works especially well in dark-mode interfaces where cyan provides high contrast and futuristic character.
  • Healthcare & Medical Imaging: Medical imaging technology (X-rays, ultrasounds, 3D scans) frequently uses cyan highlighting for precision and clarity. Healthcare tech brands have adopted this association to signal clinical precision in digital health products. (examples: Headspace, One Medical, Kaiser Permanente) Pairs naturally with white and dark gray for a medical-precision aesthetic.
  • Clean Energy & Environment: Clean energy brands use cyan to signal the intersection of technology and environmental consciousness—the "clean" tech positioning that neither pure green (environmental emphasis) nor pure blue (tech emphasis) fully achieves alone. Cyan-to-green gradients have become a shorthand for clean tech and sustainable innovation.
  • Brand positioning: Robin Egg Blue is best suited for brands projecting modernity, innovation, clarity. Categories outside this positioning—traditional or heritage brands—tend to see weaker results.
  • Adjacent applications: Beyond primary industries, Robin Egg Blue works effectively in social platform accents, clean energy brands, cyberpunk and sci-fi aesthetics—contexts where freshness serves a secondary but reinforcing role.

Robin Egg Blue earns its strongest ROI in industries where trust and recognition compound over time: Technology & Software, Healthcare & Medical Imaging, Clean Energy & Environment. Use it to build the kind of brand recognition that decades reinforce.

Frequently Asked Questions

What is the hex code for Robin Egg Blue?
The hex code for Robin Egg Blue is #00CCCC. Its RGB values are rgb(0, 204, 204) and its HSL values are hsl(180, 100%, 40%).
What does Robin Egg Blue mean in design?
Cyan sits between blue and green at the edge of visible light and is the color the eye uses to adjust from warm to cool light. It feels technological, clean, and forward-thinking. In printing, cyan is a primary process color (CMYK), giving it an association with professional reproduction and precision. In design, bright cyan signals digital interfaces, clean tech, and innovation. Lighter cyans feel fresh and airy; deeper cyans approach teal's sophistication. Cyan's primary cultural associations are ocean, ice, and digital displays. It is widely used in healthcare technology brands because it combines blue's trust with green's health connotations without the blandness of either on their own. Its deeper, richer tone gives it gravitas and sophistication, making it well-suited for primary brand colors, typography, and contexts where authority matters.
Is Robin Egg Blue WCAG accessible?
Robin Egg Blue (#00CCCC) does not pass WCAG AA on white (2:1 ratio). Use it on dark backgrounds where it achieves 10.51:1. Its overall accessibility score is 48/100.
What colors go well with Robin Egg Blue?
Robin Egg Blue pairs well with its complementary color Red (#FF0000). Analogous colors like Mint Cream and Opal also work harmoniously. Check the Color Harmonies section above for the full palette.
What is Robin Egg Blue used for?
Robin Egg Blue is commonly used for: Digital technology and software products; Water sports and aquatic brands; Clean energy and sustainability companies; Healthcare data visualization tools; Modern media and streaming services.
What are the CSS and Tailwind values for Robin Egg Blue?
In CSS, use `color: #00CCCC` or `background-color: #00CCCC`. The CSS custom property is `--color-robin-egg-blue: #00CCCC`. In Tailwind CSS, use the arbitrary value class `bg-[#00CCCC]` for backgrounds or `text-[#00CCCC]` for text.