Chartreuse
Meet Chartreuse (#7FFF00), a color that commands attention. This electric hue sits perfectly between yellow and green, radiating a unique, almost luminous quality. Its sheer intensity makes it a fascinating and bold choice for any design palette, instantly drawing the eye with its vibrant presence.
What color is Chartreuse?
Chartreuse is a vibrant tertiary color sitting precisely halfway between yellow and green on the color wheel. Its electric appearance comes from a dominant yellow undertone, giving it a distinctly warm and energetic temperature.
While its most recognized form is the bright #7FFF00, Chartreuse exists on a spectrum, from yellowish apple-green hues to shades that lean more toward a crisp, zesty lime.
What is the meaning of the color Chartreuse?
Named after the historic French liqueur, Chartreuse embodies a unique blend of excitement and nature.
It often symbolizes youthfulness and creativity, combining yellow's energy with green's harmony to create a feeling of vibrant enthusiasm.
How to use Chartreuse in UI design?
Because of its electric intensity, Chartreuse works best in moderation. Use it for accents like call-to-action buttons, icons, or key highlights to guide the user's eye. For a sharp, modern feel, pair it with deep charcoals or clean off-whites. For a more audacious palette, consider pairing it with rich blues or magentas to create a striking visual effect.
Few brands build their identity around Chartreuse, which makes it a potent choice for those wanting to stand out. Its rarity can signal a fresh, energetic, and forward-thinking identity. Companies like Culture Trip have successfully used a similar vibrant green to appear adventurous and contemporary.
Use the tools below to explore curated palettes, test color contrast for accessibility, and see how Chartreuse (#7FFF00) looks in real UI components from leading apps.
Using Chartreuse color codes
Working with Chartreuse, hex code #7FFF00, is all about managing its intensity. Its electric quality makes it a powerful accent, but it can quickly overpower a composition if used too broadly.
While #7FFF00 is the standard for web development, different design contexts require other codes. RGB values are essential for any on-screen application, defining color through light. For print materials, you'll need the CMYK equivalent, which is based on ink pigments. Models like HSL offer a more human-centric way to think about color, breaking it down into hue, saturation, and lightness.
We've converted #7FFF00 into a full spectrum of popular color codes for your convenience. Feel free to copy the exact values you need for your project from the list below.
Analogous
Analogous colors are neighbors on the color wheel. For Chartreuse, these adjacent hues create a harmonious and visually soothing color scheme.
Complementary
Complementary colors sit directly opposite each other on the color wheel. When paired with Chartreuse, they create a striking, high-contrast visual effect.
Split Complementary
A split complementary scheme pairs Chartreuse with the two colors adjacent to its direct complement, creating high contrast with less visual tension.
Triadic
A triadic palette pairs Chartreuse with two other colors from equidistant points on the color wheel, creating a bold and harmonious visual effect.
Tetradic
A tetradic color scheme for Chartreuse uses four colors, forming two complementary pairs in a rectangle on the color wheel for rich, balanced palettes.
Square
Using Chartreuse as a base, a square scheme pairs it with three other colors equidistant on the color wheel for a bold, contrasting effect.
Text Color
Background Color
Your Catchy Large Text Goes Here
Shades
Shades are darker versions of Chartreuse, created by adding black to give depth and weight.
Tints
Tints are lighter variations of Chartreuse, produced by mixing in white to soften the hue.
Tones
Tones of Chartreuse are created by adding gray, resulting in a softer, desaturated hue.
Hues
Hues are variations of Chartreuse that differ in their intensity or temperature.
Never run out of inspiration again.
Use Mobbin for free as long as you like or get full access with any of our paid plans.
