Blue-green is a refreshing and calming shade that perfectly blends the stability of green with the serenity of blue. This cool hue is a tertiary color that sits between blue and green on the color wheel, taking on the tranquil qualities of both colors. It closely resembles tones like teal and turquoise.

Blue green is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #00CEC8
- RGB value: 0% red, 80.8% green and 78.4% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are a few ways to leverage the calming and refreshing properties of blue-green in your design:
- Create a tranquil atmosphere. Blue-green excels at creating a sense of peace and serenity. Use it as a background color for calming experiences like meditation apps or spa booking platforms.
- Highlight important elements. Blue-green can stand out without being overwhelming. Use it for call-to-action buttons or primary navigation elements to draw user attention while maintaining a clean aesthetic.
- Evoke nature or growth. The natural world connection of blue-green makes it ideal for eco-friendly brands or interfaces related to plants and wellness.
- Consider contrast. Ensure proper contrast with text or other UI elements for optimal readability. Consider a Figma plug-in to ensure accessibility.Balance with warmer colors. Pairing blue-green with a touch of a warm color like orange or yellow can add vibrancy and prevent the interface from feeling too cold.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same tranquil and refreshing spectrum as blue-green, consider:
- Turquoise (#40E0D0) closely resembles blue-green with its perfect blend of blue and green, embodying the essence of tropical waters.
- Teal (#069494) offers a deeper and slightly more subdued version, capturing the depth of the ocean while staying true to the blue-green theme.
- Aquamarine (#7FFFD4) appears lighter and more ethereal, providing a softer take on the captivating clarity of blue-green.
- Cyan (#00FFFF), while brighter, shares the vibrant energy and invigorating feel of blue-green, reminiscent of clear, sunny skies.
To complement blue-green's serene tones, consider pairing it with:
- Soft Sand (#F8F0E3) provides a warm, neutral backdrop that beautifully highlights the cool vibrancy of blue-green.
- Coral (#FF8559) introduces a lively, warm contrast, echoing the colors of a sunset against the blue-green sea.
- Navy Blue (#000080) offers a rich, deep contrast that enhances the jewel-toned qualities of blue-green, perfect for a sophisticated palette.
- Silver (#C4C4C4) adds a sleek, modern touch, reflecting light and enriching the dynamic appeal of blue-green.
- Lavender (#D3D3FF) softens the palette with its gentle hue, creating a calming and romantic blend of blue-green.
Other colors worth considering include charcoal gray for a modern, grounded contrast, pale pink for a soft, complementary touch, and mustard yellow for a bold, sunny pop.
While blue-green is versatile, it may clash with:
- Bright Red (#FF0000) can be too aggressive against the calming nature of blue-green, creating a stark and potentially jarring contrast.
- Neon Green (#2CFF05) presents an overly vibrant energy that might disrupt the serene and harmonious vibe of blue-green.
- Deep Purple (#800080), while rich and regal, may overpower the subtlety of blue-green, leading to a discordant visual effect.
- Orange (#FFA500), although a complementary color in theory, its intensity can detract from the soothing qualities of blue-green, leading to a visually unsettling combination.
- Hot Pink (#FF69B4), though playful, may clash with blue-green by competing for visual dominance rather than complementing its tranquility.
Blue-green combines blue's tranquility with green's vitality, symbolizing serenity, healing, and renewal. It embodies the concept of water and Earth's protective, nurturing qualities, suggesting life, health, and well-being. It represents growth and the depths of sky and sea—a symbol of life's sustenance.
Psychologically, blue-green fosters a contemplative mood, open-mindedness, and creativity, promoting feelings of peace and rejuvenation.
Blue-green balances calmness and vibrancy, making it a powerful color for UI design. Its calming effect improves user experience with an inviting environment. Blue-green can highlight innovative and eco-friendly values, making it a popular choice for businesses that value health, wellness, and environmental sustainability.
Ancient Egyptians used blue-green pigments made from malachite for painting and ceramics, valuing it for its protective qualities and aesthetic beauty. In Mesoamerica, the Mayans associated blue-green with the rain god, Chaac, using it in offerings and art to invoke water and fertility. Its significance continued through Greek and Roman cultures, as abundantly seen in the era’s jewelry and textiles.
In the Middle Ages and during the Renaissance, artists used verdigris to produce luminous blue-green hues, prized for their vibrant color, despite their tendency to change over time. Artists, including Leonardo da Vinci and Raphae,l used blue-green to infuse their masterpieces with depth and serenity. Its calming yet vibrant character also made it a favorite color with Titian and Vermeer, who captured its tranquility and depth in their work.
Blue-green has maintained its appeal today, highlighted by its inclusion in Crayola’s crayon colors since the 1930s.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Ocean Tide
Tropical Heat
Tidal Pool
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
1.97:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
10.66:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #00CEC8, known as blue-green, has RGB values of R:0, G:206, B:200 and CMYK values of C:1, M:0, Y:0.03, K:0.19.
VALUE | CSS | |
---|---|---|
HEX | 00CEC8 | #00CEC8 |
RGB DECIMAL | 0, 206, 200 | rgb(0,206,200) |
RGB PERCENTAGE | 0, 80.8, 78.4 | rgb(0%,80.8%,78.4%) |
CMYK | 100, 0, 3, 19 | |
HSL | 178.3°, 100, 40.4 | hsl(178.3,100%,40.4%) |
HSV (OR HSB) | 178.3°, 100, 80.8 | |
WEB SAFE | 00CCCC | #00CCCC |
CIE-LAB | 75.02, -42.712, -9.065 | |
XYZ | 32.493, 48.309, 62.252 | |
xyY | 0.227, 0.338, 48.309 | |
CIE-LCH | 75.02, 43.664, 191.982 | |
CIE-LUV | 75.02, -58.652, -7.516 | |
HUNTER-LAB | 69.505, -38.186, -4.45 | |
BINARY | 00000000, 11001110, 11001000 | |
iOS - SwiftUI | Color(red: 0, green: 206/255, blue: 200/255) | |
iOS - UIKit | UIColor(red: 0, green: 206/255.0, blue: 200/255.0, alpha: 1.0) | |
Android - Compose | Color(0xFF00CEC8) |