Jewel Box Color Palette
Gemstone richness across five cuts — emerald, sapphire, amethyst, ruby-garnet, and topaz gold, each running from a bright facet down to a deep shadow. Saturated and luxurious without tipping into neon, the set reads as velvet and stained glass. For elegant branding, festive and editorial work, and anything that should feel expensive.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--jewel-tones-1: #2FA372;
--jewel-tones-2: #268C61;
--jewel-tones-3: #1E7550;
--jewel-tones-4: #175E40;
--jewel-tones-5: #114831;
--jewel-tones-6: #0C3324;
--jewel-tones-7: #2E6FB0;
--jewel-tones-8: #27619E;
--jewel-tones-9: #20528B;
--jewel-tones-10: #194479;
--jewel-tones-11: #133667;
--jewel-tones-12: #0E2954;
--jewel-tones-13: #7E4DA8;
--jewel-tones-14: #6F4197;
--jewel-tones-15: #603686;
--jewel-tones-16: #522C75;
--jewel-tones-17: #442363;
--jewel-tones-18: #371B51;
--jewel-tones-19: #B23148;
--jewel-tones-20: #9E2A40;
--jewel-tones-21: #8A2438;
--jewel-tones-22: #761E30;
--jewel-tones-23: #621828;
--jewel-tones-24: #4F1320;
--jewel-tones-25: #D49A2E;
--jewel-tones-26: #C08828;
--jewel-tones-27: #AB7622;
--jewel-tones-28: #94641D;
--jewel-tones-29: #7D5318;
--jewel-tones-30: #664213;
}SCSS
$jewel-tones-1: #2FA372;
$jewel-tones-2: #268C61;
$jewel-tones-3: #1E7550;
$jewel-tones-4: #175E40;
$jewel-tones-5: #114831;
$jewel-tones-6: #0C3324;
$jewel-tones-7: #2E6FB0;
$jewel-tones-8: #27619E;
$jewel-tones-9: #20528B;
$jewel-tones-10: #194479;
$jewel-tones-11: #133667;
$jewel-tones-12: #0E2954;
$jewel-tones-13: #7E4DA8;
$jewel-tones-14: #6F4197;
$jewel-tones-15: #603686;
$jewel-tones-16: #522C75;
$jewel-tones-17: #442363;
$jewel-tones-18: #371B51;
$jewel-tones-19: #B23148;
$jewel-tones-20: #9E2A40;
$jewel-tones-21: #8A2438;
$jewel-tones-22: #761E30;
$jewel-tones-23: #621828;
$jewel-tones-24: #4F1320;
$jewel-tones-25: #D49A2E;
$jewel-tones-26: #C08828;
$jewel-tones-27: #AB7622;
$jewel-tones-28: #94641D;
$jewel-tones-29: #7D5318;
$jewel-tones-30: #664213;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'jewel-tones': {
'1': '#2FA372',
'2': '#268C61',
'3': '#1E7550',
'4': '#175E40',
'5': '#114831',
'6': '#0C3324',
'7': '#2E6FB0',
'8': '#27619E',
'9': '#20528B',
'10': '#194479',
'11': '#133667',
'12': '#0E2954',
'13': '#7E4DA8',
'14': '#6F4197',
'15': '#603686',
'16': '#522C75',
'17': '#442363',
'18': '#371B51',
'19': '#B23148',
'20': '#9E2A40',
'21': '#8A2438',
'22': '#761E30',
'23': '#621828',
'24': '#4F1320',
'25': '#D49A2E',
'26': '#C08828',
'27': '#AB7622',
'28': '#94641D',
'29': '#7D5318',
'30': '#664213',
},
},
},
},
};JSON
{
"name": "Jewel Box",
"colors": [
"#2FA372",
"#268C61",
"#1E7550",
"#175E40",
"#114831",
"#0C3324",
"#2E6FB0",
"#27619E",
"#20528B",
"#194479",
"#133667",
"#0E2954",
"#7E4DA8",
"#6F4197",
"#603686",
"#522C75",
"#442363",
"#371B51",
"#B23148",
"#9E2A40",
"#8A2438",
"#761E30",
"#621828",
"#4F1320",
"#D49A2E",
"#C08828",
"#AB7622",
"#94641D",
"#7D5318",
"#664213"
]
}Hex list
#2FA372
#268C61
#1E7550
#175E40
#114831
#0C3324
#2E6FB0
#27619E
#20528B
#194479
#133667
#0E2954
#7E4DA8
#6F4197
#603686
#522C75
#442363
#371B51
#B23148
#9E2A40
#8A2438
#761E30
#621828
#4F1320
#D49A2E
#C08828
#AB7622
#94641D
#7D5318
#664213