Home
Colors
Seafoam
Everything you need to know about seafoam to inspire your nextdesign.
Read about Seafoam
What color isseafoam?
Seafoam is a light, soft greenish-blue hue that sits between green and cyan on the color wheel. This position blends elements of both colors, giving seafoam its characteristic light and airyquality.
What does seafoam look like on digital screens?
Seafoam is defined by the following color codes and values to ensure consistency across various digital platforms anddevices.
- HEX code: #8DDCDC
- RGB value: 55.3% red, 86.3% green, and86.3%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.
How should I effectively use seafoam in UIdesign?
Here are some ways to use seafoam in yourdesigns:
- Establish a tranquil base. Use seafoam as your primary background color to create a sense of serenity. This works well for meditation tools or productivity apps.
- Create visual interest. Pair seafoam with contrasting accents to create a more dynamic look. Consider vibrant pops of coral, sunshine yellow, or deep teal to add energy without overwhelming theuser.
- Convey growth and nature. Seafoam’s association with the ocean and fresh air makes it a perfect choice for apps and websites related to sustainability, health, orplantlife.
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.
What are similar colors toseafoam?
For variations within the same green-blue spectrum as seafoam, consider:
- Tiffany Blue® (#81D8D0) is slightly more blue, evoking a sense of sophistication.
- Blue-green (#00D1D1) is a darker and more saturated version ofseafoam.
- Turquoise (#40E0D0) is a tad more green, adding a touch of energy andliveliness.
- Cyan (#00FFFF) is a more vibrant alternative, reminiscent of tropical waters.
What colors go with seafoam?
To complement seafoam, consider pairing itwith:
- Seashell (#FFF1E7) enhances seafoam’s airy and light qualities, creating a clean, coastal palette.
- Taupe (#54463A) provides a warm and grounding base that lets seafoam’s cool tonesshine.
- Coral (#FF8559) has a vibrancy that injects a dose of energy, creating a playful and beachyvibe.
- Puce (#E491A6) adds a touch of romance, complementing seafoam’s gentle coolness.
- Pastel yellow (#FFEE8C) combines with seafoam for a cheerful andsunnyfeel.
Other colors worth considering include navy blue for a classic nautical look, white for a crisp and airy feel, or charcoal gray for a touch of modern elegance.
What colors conflict with seafoam?
While seafoam is airy and beachy, it mayclashwith:
- Chartreuse (#CCFF00) can overwhelm seafoam’s softer green tones, creating abusylook.
- Fuchsia (#FF00FF) clashes with seafoam’s cool green-blue hue, creating a jarringeffect.
- Olive green (#636B2F) creates a muddy and murky feel next to seafoam’s light andairytone.
- Purple (#9D00FF) creates an unbalanced look, making seafoam appear washedout.
What does seafoam symbolize?
Seafoam’s soft green and blue hues are a symbol of the ocean’s gentle waves and frothy bubbles on the shore. It combines the tranquility of blue with the growth and renewal ofgreen.
In color psychology, seafoam promotes feelings of peace and relaxation. The cool greens and light blues create a calming effect, similar to refreshing tropical waters. It can also evoke a bright and cheerfulmood.
In UI design, seafoam In UI design, seafoam works beautifully as a serene background color or for adding subtle highlights. It pairs well with vibrant colors such as coral or tangerine, enhancing the overall visual vibrancy of thedesign..
What’s the history ofseafoam?
The color seafoam got its name from capturing the essence of the greenish-blue waves of the ocean. The first documented use of “seafoam green” in English appeared around1916.
While its name is new, the foundational hues—green and blue—have a long history. These colors have adorned ancient Egyptian murals, Mesoamerican art, and various artifacts such as pottery, sculptures, and architectural elements—a mark of their significance across many cultures anderas.
Today, seafoam is a popular choice for its ability to create calm, refreshing environments.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Analogous
Monochromatic
Split
Triadic
Square
Custom palettes
Amazonite
Salt Lake
Pangea
Accessibility
Contrast checker
- Large Text
- Figma
- Normal Text
- How you design, align, and build matters. Do it together with Figma.
1.57: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.
13.4: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
Color conversion
The hexadecimal color #8DDCDC, known as seafoam, has RGB values of R:141 G:220, B:220 and CMYK values of C:36, M:0,Y:0,K:14.
VALUE | CSS | |
---|---|---|
HEX | 8DDCDC | #8DDCDC |
RGB DECIMAL | 141, 220, 220 | RGB(141,220,220) |
RGB PERCENTAGE | 55.3, 86.3, 86.3 | RGB(55.3%,86.3%,86.3%) |
CMYK | 36, 0, 0, 14 | |
HSL | 180°, 53, 70.8 | HSL(180,53%,70.8%) |
HSV (OR HSB) | 180°, 35.9, 86.3 | |
WEB SAFE | 99CCCC | #99CCCC |
CIE-LAB | 82.921, -24.126, -7.685 | |
XYZ | 49.493, 62.014, 77.068 | |
xyY | 0.262, 0.329, 62.014 | |
CIE-LCH | 82.921, 25.32, 197.67 | |
CIE-LUV | 82.921, -37.029, -7.999 | |
HUNTER-LAB | 78.749, -25.626, -2.9 | |
BINARY | 10001101, 11011100, 11011100 | |
iOS - SwiftUI | Color(red: 0.553, green: 0.863, blue: 0.863) | |
iOS - UIKit | UIColor(red: 0.553, green: 0.863, blue: 0.863, alpha: 1) | |
Android - Compose | Color(0xFF8DDCDC) |