Color conversion
CMYK profile: Coated FOGRA39 · Formats follow CSS Color 4 naming and WCAG 2.2 contrast rules.
At a glance
| Name | Xanh |
|---|---|
| Romanization | xanh |
| Tradition | Vietnamese traditional colors |
| Attribute | 木 |
| Family | Green |
| HEX | #007A3D |
| RGB | rgb(0,122,61) |
| HSL | hsl(150 100% 24%) |
| HSV | hsv(150, 100%, 48%) |
| OKLCH | oklch(0.508 0.133 152.3) |
| LAB | lab(44.60 -43.90 25.30) |
| XYZ | 8,14,7 |
| CMYK | cmyk(100.0% 0.0% 50.0% 52.2%) |
| RAL | #3E753B · Grass green · RAL 6010 |
| Pigment source | 蓝靛叶汁（东胡画） |
About this color
Growth with a steady pulse
Xanh is #007A3D, a Green tone with a clear cultural lineage. Read on its own it belongs to the Green family; read through its Vietnamese traditional colors roots, it carries a second layer of meaning.
Design tip
Test Xanh (#007A3D) on a neutral surface first; a Green accent then looks intentional rather than decorative.
Best use
Give Xanh the single element that must be noticed first, and let the rest of the Green palette support it.
Psychology
How it is perceived
Psychological effect
Xanh raises the perceived energy of a Green composition and pulls the eye toward action.
Emotional impact
It feels immediate and warm, so it can lift a restrained layout without making it loud.
Symbolism
What it stands for
Cultural significance
In Vietnamese traditional colors settings the shade carries local references, so verify its symbolism before a campaign.
Positive associations
Positive associations lean toward growth, health and sustainability, which is why it appears in invitations and seasonal work.
Use with care
Too much surface area can read as envy or dullness when desaturated too far, so keep it to accents and small fields.
Where it appears
Common design applications
- Campaign landing pages
- Give Xanh the single element that must be noticed first, and let the rest of the Green palette support it.
- Editorial cover systems
- Give Xanh the single element that must be noticed first, and let the rest of the Green palette support it.
- Product packaging labels
- Give Xanh the single element that must be noticed first, and let the rest of the Green palette support it.
- Dashboard status accents
- Give Xanh the single element that must be noticed first, and let the rest of the Green palette support it.
- Retail wayfinding signs
- Give Xanh the single element that must be noticed first, and let the rest of the Green palette support it.
Design guidance
How to make it work
Do
- Keep saturated fills below about twenty percent of the layout.
- Use it for the primary call to action and nothing else.
- Check the pairing at small sizes on a neutral background.
Avoid
- Do not place it beside clashing neon greens or electric blues.
- Never use it for long body text on white.
- Avoid gradients that shift its hue into another family.
Brands built on The Caregiver, The Sage use it to signal character before they say a word.
Green borrows its authority from foliage and renewal, moving easily from medical clean to deep forest calm. It reads as balance because the eye resolves it without strain.
Pairing
Colors that complete it
History
Pigments and provenance
Before synthetic dyes, Xanh was matched with mineral and plant pigments, and the Green family depended on sources such as ochre, madder and indigo. Screens now reproduce it more consistently than any single pigment ever could.
Tags
Origins & sources
Etymology: 「Xanh」是越南语对绿与蓝的统称：xanh lá 指叶绿，xanh dương 指天蓝，单说时要看搭配。
Transliteration: xanh
Variations
Shades darken and tints lighten while the hue angle stays fixed.
Shades
Darker steps built from the same hue.
Tints
Lighter steps for surfaces and backgrounds.
Design scale 50–950
#2A9052 · 4.67:1Use cases
- Shades → hover, shadows, depth
- Tints → highlights, surfaces
- Balance → consistent color systems
Design tip
Keep one dominant tone, one supporter and one accent.
Across color systems
The closest named color in each tradition and design system, measured in OKLCH ΔE. Lower means closer.
Asian color traditions
Design systems
Show all (11)
RAL Classic
Where it sits in the library
These figures come from a build-time ranking across all 116 traditional colors on the site, not from hand-written description.
- Lightness L* 44.6 — rank 74 of 116 traditional colors (middle third).
- Chroma C 50.671 — rank 48 (medium chroma).
- Hue 150°, in the green family.
- Closest neighbor in the same hue family: “Đen”, ΔE OK 0.319.
Can three steps of one hue work together
Three steps from the 50–950 scale of “Xanh”: same hue, only lightness differs. Below is the contrast whenever one of them is text on another.
- 200 ↔ 500: 2.36:1 (FAIL)
- 500 ↔ 800: 2.74:1 (FAIL)
- 200 ↔ 800: 6.48:1 (AA)
Pairs reaching 4.5:1 (AA body text): 1 of 3. Pairs reaching 3:1 (large text, icons, borders): 1 of 3. The rest fall below 3:1 and should not carry text.
Color combinations
Rotate the hue wheel while holding lightness steady.
How to use it
Three moves keep the color readable and deliberate.
Why it works
The perceptual reasoning behind the palette.
All six palettes rotate hue at similar lightness, so the best in-group contrast falls between 1.03:1 and 1.68:1. Use them for fills, charts and graphics rather than as text on each other — when you need text, use a neutral or a darker step of the same scale.
Complementary
Opposite the hue wheel; it sharpens the focal color by contrast.
Best use: Calls to action and single-feature highlights
Split-complementary
Two neighbors of the opposite hue; softer than a direct complement.
Best use: Balanced marketing layouts with two accents
Triadic
Three hues spaced evenly; lively but needs one dominant voice.
Best use: Event identities and playful editorial spreads
Analogous
Neighbors on the wheel; quiet, cohesive and easy to scan.
Best use: Backgrounds, charts and calm product pages
Monochromatic
One hue across lightness steps; disciplined and premium.
Best use: Design systems, packaging and typographic hierarchy
Tetradic
Two complementary pairs; rich, but requires strict proportion.
Best use: Complex dashboards and multi-service brands
Export the scale
CSS
:root {
--brand-50: #E4FDEA;
--brand-100: #D0F9DA;
--brand-200: #AEEABD;
--brand-300: #8AD7A0;
--brand-400: #66C082;
--brand-500: #3EA161;
--brand-600: #25884C;
--brand-700: #0D6F39;
--brand-800: #005628;
--brand-900: #003D1A;
--brand-950: #00290F;
}
Tailwind
theme: {
extend: {
colors: {
brand: {
50: '#E4FDEA',
100: '#D0F9DA',
200: '#AEEABD',
300: '#8AD7A0',
400: '#66C082',
500: '#3EA161',
600: '#25884C',
700: '#0D6F39',
800: '#005628',
900: '#003D1A',
950: '#00290F',
},
},
},
}
Figma
{
"brand": {
"50": {
"$type": "color",
"$value": "#E4FDEA"
},
"100": {
"$type": "color",
"$value": "#D0F9DA"
},
"200": {
"$type": "color",
"$value": "#AEEABD"
},
"300": {
"$type": "color",
"$value": "#8AD7A0"
},
"400": {
"$type": "color",
"$value": "#66C082"
},
"500": {
"$type": "color",
"$value": "#3EA161"
},
"600": {
"$type": "color",
"$value": "#25884C"
},
"700": {
"$type": "color",
"$value": "#0D6F39"
},
"800": {
"$type": "color",
"$value": "#005628"
},
"900": {
"$type": "color",
"$value": "#003D1A"
},
"950": {
"$type": "color",
"$value": "#00290F"
}
}
}
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120"> <rect x="0" y="0" width="100" height="90" fill="#E4FDEA"/> <rect x="100" y="0" width="100" height="90" fill="#D0F9DA"/> <rect x="200" y="0" width="100" height="90" fill="#AEEABD"/> <rect x="300" y="0" width="100" height="90" fill="#8AD7A0"/> <rect x="400" y="0" width="100" height="90" fill="#66C082"/> <rect x="500" y="0" width="100" height="90" fill="#3EA161"/> <rect x="600" y="0" width="100" height="90" fill="#25884C"/> <rect x="700" y="0" width="100" height="90" fill="#0D6F39"/> <rect x="800" y="0" width="100" height="90" fill="#005628"/> <rect x="900" y="0" width="100" height="90" fill="#003D1A"/> <rect x="1000" y="0" width="100" height="90" fill="#00290F"/> <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text> <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text> <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text> <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text> <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text> <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text> <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text> <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text> <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text> <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text> <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text> </svg>
iOS
extension UIColor {
static let brand50 = UIColor(red: 0.894, green: 0.992, blue: 0.918, alpha: 1.0)
static let brand100 = UIColor(red: 0.816, green: 0.976, blue: 0.855, alpha: 1.0)
static let brand200 = UIColor(red: 0.682, green: 0.918, blue: 0.741, alpha: 1.0)
static let brand300 = UIColor(red: 0.541, green: 0.843, blue: 0.627, alpha: 1.0)
static let brand400 = UIColor(red: 0.400, green: 0.753, blue: 0.510, alpha: 1.0)
static let brand500 = UIColor(red: 0.243, green: 0.631, blue: 0.380, alpha: 1.0)
static let brand600 = UIColor(red: 0.145, green: 0.533, blue: 0.298, alpha: 1.0)
static let brand700 = UIColor(red: 0.051, green: 0.435, blue: 0.224, alpha: 1.0)
static let brand800 = UIColor(red: 0.000, green: 0.337, blue: 0.157, alpha: 1.0)
static let brand900 = UIColor(red: 0.000, green: 0.239, blue: 0.102, alpha: 1.0)
static let brand950 = UIColor(red: 0.000, green: 0.161, blue: 0.059, alpha: 1.0)
}
Android
<resources> <color name="brand_50">#E4FDEA</color> <color name="brand_100">#D0F9DA</color> <color name="brand_200">#AEEABD</color> <color name="brand_300">#8AD7A0</color> <color name="brand_400">#66C082</color> <color name="brand_500">#3EA161</color> <color name="brand_600">#25884C</color> <color name="brand_700">#0D6F39</color> <color name="brand_800">#005628</color> <color name="brand_900">#003D1A</color> <color name="brand_950">#00290F</color> </resources>
Principles
Balance
Keep one dominant tone, one supporter and one accent.
Contrast
Test body text against both white and black before shipping.
Harmony
Rotate the hue wheel while holding lightness steady.
Color contrast checker
Test body text against both white and black before shipping.
Give Xanh the single element that must be noticed first, and let the rest of the Green palette support it.
WCAG contrast standards
WCAG 2.2 sets minimum contrast for text and interface parts. #007A3D measures 5.45:1 against white (AA) and 3.46:1 against black (FAIL). Use the table below to choose the right threshold for the text size.
| Level | Normal text | Large text (18pt+ / 14pt bold) | Icons & UI parts |
|---|---|---|---|
| AAA | 7 : 1 | 4.5 : 1 | — |
| AA | 4.5 : 1 | 3 : 1 | 3 : 1 |
| Fails | < 4.5 : 1 | < 3 : 1 | < 3 : 1 |
Large text means 18pt regular or 14pt bold. UI parts need 3:1 against adjacent colors. AA is the common compliance baseline; AAA is enhanced.
Technical formats
Notation across color spaces
CSS Color 4
sRGB / D65
HSL
perceptual
CIE Lab
CIE LCH
CIE XYZ
CIE LUV
CSS HWB
Practical formats
Ready-to-use values
custom properties
arbitrary value
ARGB
dart:ui
RGB / CMYK
FOGRA39
Color analysis
Measured color properties
relative luminance · cool
vs white · AA · cool
vs black · FAIL · cool
saturation 100% · cool
lightness 24% · cool
Đen #1A1A1A · cool
Similar colors
Nearest colors from the full Irodori library, ranked by ΔE.
Blindness simulator
How it reads with color vision deficiency
How it reads with color vision deficiency · ΔE 61.8
Creative aspects
Culture, mood and story
It is commonly read as energy, warmth, confidence and a trace of ceremony.
It is commonly read as energy, warmth, confidence and a trace of ceremony.
It is commonly read as energy, warmth, confidence and a trace of ceremony.
It is commonly read as energy, warmth, confidence and a trace of ceremony.
It is commonly read as energy, warmth, confidence and a trace of ceremony.