Used for primary actions, buttons, and key interactive elements.
- 50:
#fbf0e9- Very light chocolate - 100:
#f8e1d3 - 200:
#f1c3a7 - 300:
#eaa67b - 400:
#e28850 - 500:
#db6a24- Primary brand color - 600:
#af551d- Primary hover state - 700:
#844015 - 800:
#582a0e - 900:
#2c1507 - 950:
#1f0f05
Used for secondary elements and complementary UI components.
- 50:
#f9f1eb - 100:
#f4e3d7 - 200:
#e8c6b0 - 300:
#ddaa88 - 400:
#d18e61 - 500:
#c67139- Secondary brand color - 600:
#9e5b2e - 700:
#774422 - 800:
#4f2d17 - 900:
#28170b - 950:
#1c1008
Used for highlights, badges, and attention-grabbing elements.
- 50:
#fdf7e7 - 100:
#fcefcf - 200:
#f8dfa0 - 300:
#f5cf70 - 400:
#f2bf40- Accent for dark mode links - 500:
#eeb011- Main accent color - 600:
#bf8c0d - 700:
#8f690a - 800:
#5f4607 - 900:
#302303 - 950:
#211902
Used for text, backgrounds, borders, and neutral UI elements.
- 50:
#f5f0f2- Light background, dark mode text - 100:
#eae1e6 - 200:
#d6c2cd - 300:
#c1a4b3 - 400:
#ac869a - 500:
#986781 - 600:
#795367 - 700:
#5b3e4d - 800:
#3d2934 - 900:
#1e151a- Main text color - 950:
#150e12- Dark background
Available for future use in special elements or highlights.
- 50:
#fafaea - 100:
#f6f4d5 - 200:
#ede9ab - 300:
#e3df82 - 400:
#dad458 - 500:
#d1c92e - 600:
#a7a125 - 700:
#7d791c - 800:
#545012 - 900:
#2a2809 - 950:
#1d1c06
- Background:
#ffffff(white) - Text:
neutral-900(#1e151a) - Links:
primary-500(#db6a24) - Buttons:
primary-600(#af551d) - Borders:
neutral-200(#d6c2cd)
- Background:
neutral-950(#150e12) - Text:
neutral-50(#f5f0f2) - Links:
accent-400(#f2bf40) - Buttons:
primary-600(#af551d) - Borders:
neutral-800(#3d2934)
This warm, earthy palette creates a welcoming and professional atmosphere:
- Chocolate browns convey reliability and grounding
- Golden yellows add warmth and energy
- Shadow greys provide sophisticated neutrals with subtle purple undertones
- Perfect for a developer tool that values both functionality and aesthetics