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

Home

Colors

Periwinkle

Everything you need to know about periwinkle to inspire your next design.

Launch in Figma Now

Read about Periwinkle

Pick a palette type

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

Split

Monochromatic

Analogous

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)

Keep learning

Figma color wheelWant to find the perfect complementary or analogous colors to match periwinkle?Learn moreLavenderDive into the serene and delicate color of lavender.Learn moreBlue-greenLearn about the color blue-green.Learn more
Periwinkle Color: Hex Code, Palettes & Meaning | Figma (2024)

References

Top Articles
Television Archive News Search Service
Growing and controlling periwinkle in your garden
Funny Roblox Id Codes 2023
Golden Abyss - Chapter 5 - Lunar_Angel
Www.paystubportal.com/7-11 Login
Joi Databas
DPhil Research - List of thesis titles
Cooking Chutney | Ask Nigella.com
Shs Games 1V1 Lol
Evil Dead Rise Showtimes Near Massena Movieplex
Steamy Afternoon With Handsome Fernando
Which aspects are important in sales |#1 Prospection
Detroit Lions 50 50
Zürich Stadion Letzigrund detailed interactive seating plan with seat & row numbers | Sitzplan Saalplan with Sitzplatz & Reihen Nummerierung
Grace Caroline Deepfake
978-0137606801
Justified Official Series Trailer
Patrick Bateman Notebook
London Ups Store
Committees Of Correspondence | Encyclopedia.com
Pizza Hut In Dinuba
Jinx Chapter 24: Release Date, Spoilers & Where To Read - OtakuKart
How Much You Should Be Tipping For Beauty Services - American Beauty Institute
Free Online Games on CrazyGames | Play Now!
Sizewise Stat Login
VERHUURD: Barentszstraat 12 in 'S-Gravenhage 2518 XG: Woonhuis.
Jet Ski Rental Conneaut Lake Pa
Unforeseen Drama: The Tower of Terror’s Mysterious Closure at Walt Disney World
C&T Wok Menu - Morrisville, NC Restaurant
How Taraswrld Leaks Exposed the Dark Side of TikTok Fame
Dashboard Unt
Access a Shared Resource | Computing for Arts + Sciences
Speechwire Login
Restored Republic
3473372961
Craigslist Gigs Norfolk
Litter-Robot 3 Pinch Contact & DFI Kit
Amici Pizza Los Alamitos
Moxfield Deck Builder
Senior Houses For Sale Near Me
Montrose Colorado Sheriff's Department
Whitehall Preparatory And Fitness Academy Calendar
Trivago Myrtle Beach Hotels
Nancy Pazelt Obituary
Birmingham City Schools Clever Login
Trivago Anaheim California
Thotsbook Com
Vérificateur De Billet Loto-Québec
Vci Classified Paducah
Www Pig11 Net
Ty Glass Sentenced
Latest Posts
Article information

Author: Roderick King

Last Updated:

Views: 6364

Rating: 4 / 5 (71 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Roderick King

Birthday: 1997-10-09

Address: 3782 Madge Knoll, East Dudley, MA 63913

Phone: +2521695290067

Job: Customer Sales Coordinator

Hobby: Gunsmithing, Embroidery, Parkour, Kitesurfing, Rock climbing, Sand art, Beekeeping

Introduction: My name is Roderick King, I am a cute, splendid, excited, perfect, gentle, funny, vivacious person who loves writing and wants to share my knowledge and understanding with you.