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

What color is periwinkle?

Periwinkle is a soft, cool-toned blend of blue and purple, embodying calm and tranquil qualities. This delicate shade sits between blue and purple on the color wheel, offering a dreamy and serenefeel.

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

What does periwinkle look like on digital screens?

Periwinkle is defined by the following color codes and values to ensure consistency across various digital platforms anddevices.

  • HEX code: #CCCCFF
  • RGB value: 80% red, 80% green, and100%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 periwinkle in UIdesign?

Here are some ways to incorporate periwinkle into UI designs:

  • Create a calming atmosphere. Periwinkle has a light hue that can create a calming and inviting interface—ideal for sleep or meditation apps or any platforms that promote relaxation.
  • Make key elements pop. Using periwinkle as a background color can help make CTAs and other important information stand out, providing a contrast that doesn’t overwhelm theuser.
  • Reduce eye strain. Periwinkle and other light shades offer a softer contrast than bolder interfaces that may cause eyefatigue.

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 to periwinkle?

For variations within the same soft spectrum as periwinkle, consider:

  • Mauve (#E0AFFF) has a similar softness with a pinkundertone.
  • Light blue (#90D5FF) is slightly brighter with blue undertones, reminiscent of a clearbluesky.
  • Lavender (#D3D3FF) is more muted and soft with subtle purple undertones.
  • Serenity (#B3CEE5) captures the essence of its name, offering a calming light blue color with gray undertones.

What colors go with periwinkle?

To complement periwinkle, consider pairing itwith:

  • Pastel yellow (#FFEE8C) brings a sunny and cheerful vibe, adding warmth to periwinkle’s coolness.
  • Cornflower blue (#6395EE) creates a subtle contrast for a serene and calming colorpalette.
  • Pastel orange (#FFC067) brings a warmth that creates a vibrant and energizing color combination.
  • Ivory (#FFFFE3) creates a soft and elegant palette that allows periwinkle toshine.

Other colors worth considering include mint green for a refreshing and invigorating feel, coral to offer a vibrant contrast against the softness of periwinkle, and green sage for a natural and earthy colorpalette.

What colors conflict with periwinkle?

While periwinkle is calming, it mayclashwith:

  • Neon green (#2CFF05) can overpower periwinkle’s delicate nature due to itsintensity.
  • Dark orange (#C76E00) has a warmth and richness that may appear unbalanced next to the coolness ofperiwinkle.
  • Red (#FF2C2C) can clash with periwinkle due to its bright hue andsaturation.
  • Olive green (#636B2F) has deep green undertones that may not harmonize with periwinkle’s softerhue.

What does periwinkle symbolize?

Periwinkle symbolizes peace and tranquility. It's also linked to nostalgia, as its gentle and calming nature can bring about sentimental memories. In Christianity, the periwinkle flower is linked to the Virgin Mary, symbolizing purity andinnocence.

In color psychology, periwinkle’s calming blue undertones evoke feelings of relaxation and mental clarity, while its purple influence promotes feelings of trust andharmony.

In UI design, periwinkle can bring a calming effect to interfaces, ideal for wellness, meditation, and sleep apps. You can also use it to create a soft background color that helps bolder UI elementspop.

What’s the history of periwinkle?

Periwinkle gets its name from the light blue and purple shades of the periwinkle flower. The color was first recorded in English in 1922 and added to the Crayola color palette in1949.

In the ‘80s and ‘90s, like many other pastel hues, periwinkle gained popularity as muted color palettes became a staple in fashion, art, and interior design. Today, periwinkle ribbons symbolize hope and peace, raising awareness for esophageal and stomachcancer.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Analogous

Monochromatic

Split

Triadic

Square

Custom palettes

Under the Moonlight

Sunny Lilac

Purple Starfish

Accessibility

Contrast checker

Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.

1.54: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.65: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 #CCCCFF, known as periwinkle, has RGB values of R:204 G:204, B:255 and CMYK values of C:0.2, M:0.2, Y:0,K:0.

VALUECSS
HEXCCCCFF#CCCCFF
RGB DECIMAL204, 204, 255RGB(204, 204, 255)
RGB PERCENTAGE80, 80, 100RGB(80%, 80%, 100%)
CMYK20, 20, 0, 0
HSL240°, 100, 90HSL(240,100%,90%)
HSV (OR HSB)240°, 20, 100
WEB SAFECCCCFF#CCCCFF
CIE-LAB83.57, 10.297, -24.918
XYZ64.541, 63.243, 103.409
xyY0.279, 0.274, 63.243
CIE-LCH83.57, 26.962, 292.452
CIE-LUV83.57, -3.002, -41.552
HUNTER-LAB79.525, 5.699, -21.429
BINARY11001100, 11001100, 11111111
iOS - SwiftUIColor(red: 0.8, green: 0.8, blue: 1)
iOS - UIKitUIColor(red: 0.8, green: 0.8, blue: 1, alpha: 1)
Android - ComposeColor(0xFFCCCCFF)
Periwinkle Color: Hex Code, Palettes & Meaning | Figma (2024)

References

Top Articles
Latest Posts
Article information

Author: Msgr. Benton Quitzon

Last Updated:

Views: 6351

Rating: 4.2 / 5 (43 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Msgr. Benton Quitzon

Birthday: 2001-08-13

Address: 96487 Kris Cliff, Teresiafurt, WI 95201

Phone: +9418513585781

Job: Senior Designer

Hobby: Calligraphy, Rowing, Vacation, Geocaching, Web surfing, Electronics, Electronics

Introduction: My name is Msgr. Benton Quitzon, I am a comfortable, charming, thankful, happy, adventurous, handsome, precious person who loves writing and wants to share my knowledge and understanding with you.