What is the hex code for chartreuse?

The hex code for chartreuse is #7FFF00. The same color is rgb(127, 255, 0), hsl(90, 100%, 50%) and oklch(89% 0.265 136), and in CSS you can also write the keyword chartreuse directly.

Can you use white text on chartreuse?

White text on chartreuse has a contrast ratio of 1.29:1, which fails AA even for large text under WCAG 2.2. Black text reaches 16.20:1 and passes both AA and AAA. In APCA terms that is Lc −16.3 for white and Lc 89.4 for black.

What is the RGB value of chartreuse?

Chartreuse is rgb(127, 255, 0): red 127, green 255 and blue 0 on the 0 to 255 scale, or 49.8%, 100.0% and 0.0%. As a decimal integer it is 8388352.

CSS named color

Chartreuse #7FFF00

Chartreuse (CSS keyword chartreuse) has the hex code #7FFF00 and the RGB value rgb(127, 255, 0): a very light, vivid green.

Chartreuse#7FFF00

Named after Chartreuse, the green liqueur made by Carthusian monks in France. The CSS value (#7fff00) is a very bright yellow-green that sits between lawngreen and greenyellow.

Color codes for Chartreuse

Color codes for Chartreuse
CSS keyword	chartreuse
HEX	#7FFF00
RGB	rgb(127, 255, 0)
HSL	hsl(90, 100%, 50%)
HWB	hwb(90 0% 0%)
OKLCH	oklch(89% 0.265 136)
CMYK (naive, no ICC profile)	cmyk(50%, 0%, 100%, 0%)
Decimal	8,388,352
Hue family	Greens

Contrast and accessibility

On chartreuse, black text has a contrast ratio of 16.20:1 and passes AAA at any text size; white text reaches 1.29:1.

WCAG 2.2 contrast ratios (success criteria 1.4.3 and 1.4.6: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1). APCA Lc is the lightness contrast from the APCA-W3 0.0.98G model proposed for WCAG 3; a higher absolute value is more readable, and Lc 75 is its suggested minimum for body text.

Contrast and accessibility
Pair	Ratio	AA	AA large	AAA	AAA large	APCA Lc
Black text on chartreuse	16.20:1	Pass	Pass	Pass	Pass	89.4
White text on chartreuse	1.29:1	Fail	Fail	Fail	Fail	−16.3
Chartreuse text on white	1.29:1	Fail	Fail	Fail	Fail	14.2
Chartreuse text on black	16.20:1	Pass	Pass	Pass	Pass	−89.7

Tints and shades

Each step mixes chartreuse with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, chartreuse, white 25%) in CSS.

Tints (mixed with white)

5%
#85ff0d
15%
#92ff26
25%
#9fff40
35%
#acff59
45%
#b9ff73
55%
#c5ff8c
65%
#d2ffa6
75%
#dfffbf
85%
#ecffd9
95%
#f9fff2

Shades (mixed with black)

5%
#79f200
15%
#6cd900
25%
#5fbf00
35%
#53a600
45%
#468c00
55%
#397300
65%
#2c5900
75%
#204000
85%
#132600
95%
#060d00

Color harmonies

Rotating the hue in OKLCH while keeping lightness and chroma, chartreuse's complementary color is #F8C4FF (close to pink), its analogous colors are #EEE100 and #00FFBB, and its triadic partners are #BBDEFF and #FFC6C9. For text on top, black gives the higher contrast.

Color harmonies
Harmony	Rotation	Color
Complementary	+180°	#f8c4ff
Analogous	−30°, +30°	#eee100#00ffbb
Triadic	+120°, +240°	#bbdeff#ffc6c9
Split-complementary	+150°, +210°	#d6d4ff#ffc0e9

Computed in OKLCH: the hue is rotated by 180° (complementary), ±30° (analogous), ±120° (triadic) and 180° ±30° (split-complementary) while lightness and chroma stay fixed. Results that fall outside sRGB are brought back with the CSS Color 4 gamut mapping algorithm. Because this uses OKLCH, the values differ from tools that rotate hue in HSL, but every color keeps the same perceived lightness.

Warm or cool?

Chartreuse sits on the boundary: its hue of 90° on the HSL wheel is a yellow-green, which reads warm next to blues and cool next to reds and oranges.

Nearest named and Tailwind colors

Distance is ΔE OK, the Euclidean distance in OKLab multiplied by 100. Values under about 2 are hard to tell apart side by side.

Nearest CSS named colors

Nearest CSS named colors
Color	HEX	ΔE OK
lawngreen	#7cfc00	0.9
greenyellow	#adff2f	4.7
lime	#00ff00	5.0

Nearest Tailwind v4 colors

Nearest Tailwind v4 colors
Color	HEX	ΔE OK
lime-400	#9ae600	6.4
lime-300	#bbf451	7.8
lime-500	#7ccf00	12.8

Code snippets

CSS

.element {
  color: chartreuse;
  background-color: #7fff00;
  border-color: rgb(127 255 0);
  outline-color: oklch(89% 0.265 136);
}

Tailwind CSS

<div class="bg-[#7fff00] text-black">...</div>

/* or register it once in your CSS (Tailwind v4) */
@theme {
  --color-chartreuse: #7fff00;
}
/* then use bg-chartreuse, text-chartreuse, border-chartreuse */

SwiftUI

import SwiftUI

extension Color {
  static let chartreuse = Color(red: 0.498, green: 1.000, blue: 0.000)
}

Jetpack Compose

import androidx.compose.ui.graphics.Color

val Chartreuse = Color(0xFF7FFF00)

Flutter

import 'package:flutter/material.dart';

const chartreuse = Color(0xFF7FFF00);

Android XML

<!-- res/values/colors.xml -->
<color name="chartreuse">#7FFF00</color>

Frequently asked questions

What is the hex code for chartreuse?: The hex code for chartreuse is #7FFF00. The same color is rgb(127, 255, 0), hsl(90, 100%, 50%) and oklch(89% 0.265 136), and in CSS you can also write the keyword chartreuse directly.
Is chartreuse a warm or cool color?: Chartreuse sits on the boundary: its hue of 90° on the HSL wheel is a yellow-green, which reads warm next to blues and cool next to reds and oranges.
What colors go with chartreuse?: Rotating the hue in OKLCH while keeping lightness and chroma, chartreuse's complementary color is #F8C4FF (close to pink), its analogous colors are #EEE100 and #00FFBB, and its triadic partners are #BBDEFF and #FFC6C9. For text on top, black gives the higher contrast.
Can you use white text on chartreuse?: White text on chartreuse has a contrast ratio of 1.29:1, which fails AA even for large text under WCAG 2.2. Black text reaches 16.20:1 and passes both AA and AAA. In APCA terms that is Lc −16.3 for white and Lc 89.4 for black.
What is the RGB value of chartreuse?: Chartreuse is rgb(127, 255, 0): red 127, green 255 and blue 0 on the 0 to 255 scale, or 49.8%, 100.0% and 0.0%. As a decimal integer it is 8388352.

Last reviewed September 27, 2026 by Arielton Oberek.