Seafoam Color: Hex Code, Palettes & Meaning | Figma (2024)

Home

Colors

Seafoam

Everything you need to know about seafoam to inspire your nextdesign.

Launch in FigmaNow

Read about Seafoam

Pick a palette type

Back to topLaunch in FigmaNow

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.

Seafoam Color: Hex Code, Palettes & Meaning | Figma (1)Seafoam Color: Hex Code, Palettes & Meaning | Figma (2)

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.

VALUECSS
HEX8DDCDC#8DDCDC
RGB DECIMAL141, 220, 220RGB(141,220,220)
RGB PERCENTAGE55.3, 86.3, 86.3RGB(55.3%,86.3%,86.3%)
CMYK36, 0, 0, 14
HSL180°, 53, 70.8HSL(180,53%,70.8%)
HSV (OR HSB)180°, 35.9, 86.3
WEB SAFE99CCCC#99CCCC
CIE-LAB82.921, -24.126, -7.685
XYZ49.493, 62.014, 77.068
xyY0.262, 0.329, 62.014
CIE-LCH82.921, 25.32, 197.67
CIE-LUV82.921, -37.029, -7.999
HUNTER-LAB78.749, -25.626, -2.9
BINARY10001101, 11011100, 11011100
iOS - SwiftUIColor(red: 0.553, green: 0.863, blue: 0.863)
iOS - UIKitUIColor(red: 0.553, green: 0.863, blue: 0.863, alpha: 1)
Android - ComposeColor(0xFF8DDCDC)

Keep learning

Figma color wheelWant to find the perfect complementary or analogous colors to matchseafoam?Learn moreTiffany BlueDiscover the sophisticated color of TiffanyBlue®.Learn moreTurquoiseDive into the calming color ofturquoise.Learn more
Seafoam Color: Hex Code, Palettes & Meaning | Figma (2024)

References

Top Articles
Latest Posts
Article information

Author: Pres. Lawanda Wiegand

Last Updated:

Views: 6080

Rating: 4 / 5 (51 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Pres. Lawanda Wiegand

Birthday: 1993-01-10

Address: Suite 391 6963 Ullrich Shore, Bellefort, WI 01350-7893

Phone: +6806610432415

Job: Dynamic Manufacturing Assistant

Hobby: amateur radio, Taekwondo, Wood carving, Parkour, Skateboarding, Running, Rafting

Introduction: My name is Pres. Lawanda Wiegand, I am a inquisitive, helpful, glamorous, cheerful, open, clever, innocent person who loves writing and wants to share my knowledge and understanding with you.