Skip to main content

Chartreuse

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

Get color palette

Pick a color

Hex

RGB

HSB

HSL

Pick palette settings

Custom palettes

Chartreuse is a vivid and striking color that exudes vibrancy and energy. This shade sits near the yellow end of the spectrum between yellow and green on the color wheel, emphasizing its bright, neon-like quality. While chartreuse can vary in hue from a softer lime green to a more intense neon yellow-green, this specific shade leans towards a radiant neon, making it a standout choice for designs that require dynamic visual impact.

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

- HEX code: #CCFF00

- RGB value: 80% red, 100% green and 0% 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.

To effectively use chartreuse in UI design, consider these approaches:

  • Use as an accent color. Due to its brightness, chartreuse works best as an accent color for important notifications, icons, or buttons. It's especially effective in dark mode designs, where its luminosity can truly pop.
  • Balance with cool tones. Pair chartreuse with cool blues or grays to balance its warmth. This combination can enhance the user experience by providing a comfortable contrast.
  • Brighten and energize your interface. With its vibrant energy, chartreuse can bring a lively and fresh look to UI. It's perfect for adding pops of color that draw attention without overwhelming the user's senses.
  • Signal innovation and eco-friendliness. Chartreuse's unique shade can convey innovation and environmental consciousness. Use it in apps or websites focused on technology, sustainability, or health to align with these themes.

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 bright and energetic spectrum as chartreuse, consider:

  • Lime green (#89F336) is a more saturated and purely green version, sharing chartreuse's vibrancy but leaning more towards the green end of the spectrum.
  • Neon yellow (#CFFF04) closely matches the intensity and brightness of chartreuse but with a slight shift towards yellow, offering a similar electric vibe.
  • Spring green (#A7F432) softens the intensity slightly, blending green and yellow with a softer, more pastoral feel while maintaining the lively essence.
  • Lemon lime (#E3FF00) offers a slightly more yellow-toned variation, capturing the zest and tanginess associated with chartreuse's dynamic color.

To complement chartreuse's lively tones, consider pairing it with:

  • Deep purple (#6A0DAD) provides a rich, luxurious contrast, making chartreuse pop with an almost electric vibrancy.
  • Sky blue (#87CEEB) introduces a calm, refreshing contrast, balancing chartreuse's intensity with the serenity of a clear day.
  • Slate gray (#6D8196) offers a modern, neutral backdrop that grounds chartreuse's brightness, suitable for sophisticated spaces.
  • Soft pink (#FFC0CB) adds a gentle, feminine touch, subtly complementing chartreuse without overwhelming its presence.
  • Navy blue (#000080) for a bold, classic look that contrasts sharply with chartreuse, highlighting its uniqueness and vibrancy.

Other colors worth considering include creamy white for a soft, harmonious blend, terracotta for an earthy, grounded contrast, and coral for a lively, tropical palette.

While chartreuse is versatile, it may clash with:

  • Bright red (#FF0000) can create a visually jarring contrast, potentially clashing with Chartreuse's yellow-green tones in a way that's too aggressive for most palettes.
  • Dark brown (#654321), while neutral, might dull the vibrancy of chartreuse, leading to a muted and less appealing combination.
  • Electric blue (#0000FF) offers a cool, vivid contrast that can overshadow the warmth and brightness of Chartreuse, creating a palette that may feel disjointed.
  • Hot pink (#FF69B4), though lively, may compete too directly with chartreuse, resulting in a color scheme that's overly vibrant and potentially chaotic.
  • Olive green (#636B2F), with its muted, earthy tones, may not provide enough contrast with chartreuse, resulting in a blend that lacks distinction.

Chartreuse stands for energy, vitality, and surprise. This bright color captures spring and nature's comeback, showing growth, renewal, and bold innovation. Its eye-catching shade often means creativity and uniqueness, making it stand out for its brightness and ability to grab attention.

In color psychology, chartreuse feels stimulating and refreshing, bringing a feeling of liveliness and spontaneity. It can lift moods and inspire boldness and creativity, making it an excellent pick for spaces and designs that aim to energize and encourage.

Using Chartreuse in UI/UX design catches the user's attention and brings a fresh, innovative feel—perfect for brands that want to connect to creativity, growth, and a green mindset.

The color chartreuse is named after the French liqueur "Chartreuse," produced by Carthusian monks since the 1740s. This liqueur, known for its distinctive greenish-yellow hue, has imbued the color with mystery and exclusivity. The term was then used more broadly to describe similar shades of green and yellow, capturing the vibrant spirit of the drink.

During the late 19th and early 20th centuries, chartreuse became popular due to the era's interest in bright and unique hues. Chartreuse stood for a modern and experimental style in artistic and decorative settings.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom palettes

Cauldron Brew

Electropop

Tropical Mango

Contrast checker

Contrast 1.18

Large Text

#CCFF00

Normal Text

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

This is #CCFF00 text on a #FFFFFF background.
Category
Fail
Fail
Fail
Fail
Fail
Fail

Contrast 17.87

Large Text

#CCFF00

Normal Text

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

This is #CCFF00 text on a #000000 background.
Category
Pass
Pass
Pass
Pass
Pass
Pass

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

The hexadecimal color #CCFF00, known as chartreuse, has RGB values of R:204, G:255, B:0 and CMYK values of C:0.2, M:0, Y:1, K:0.

VALUECSS
HEXCCFF00#CCFF00
RGB DECIMAL204, 255, 0rgb(204,255,0)
RGB PERCENTAGE80, 100, 0rgb(80%,100%,0%)
CMYK20, 0, 100, 0
HSL72°, 100, 50hsl(72,100%,50%)
HSV (OR HSB)72°, 100, 100
WEB SAFECCFF00#CCFF00
CIE-LAB93.605, -41.948, 90.274
XYZ60.661, 84.357, 13.087
xyY0.384, 0.534, 84.357
CIE-LCH93.605, 99.544, 114.923
CIE-LUV93.605, -24.475, 106.781
HUNTER-LAB91.846, -42.837, 55.844
BINARY11001100, 11111111, 00000000
iOS - SwiftUIColor(red: 204/255, green: 255/255, blue: 0/255)
iOS - UIKitUIColor(red: 204/255.0, green: 255/255.0, blue: 0/255.0, alpha: 1.0)
Android - ComposeColor(0xFFCCFF00)