Chroma Studio — Color Intelligence Platform
A full-featured color intelligence platform: AI palette generation, WCAG 2.1 accessibility checking, color blindness simulation, dark mode generator, and 7-format export — built for Android and web designers.
Client
Personal
Year
2025
Category
Design Engineering
Built at
Personal
Impact
WCAG 2.1 AA/AAA contrast ratio checker built-in
Color blindness simulation across 5 deficiency types
7 export formats: CSS Vars, Tailwind, SCSS, JSON Tokens, Android XML, Kotlin/Compose, Figma Tokens
AI Palette Generator from natural language descriptions
Key Metrics
palette Schemes
Analogous · Complementary · Triadic · Monochrome · Split-Comp · Tetradic
export Formats
7 (CSS, Tailwind, SCSS, JSON, Android XML, Kotlin, Figma)
accessibility Checks
WCAG 2.1 AA + AAA + color blindness (5 types)
tools
Dark Mode Generator · Gradient Builder · Shade System · Palette Score
Tech Stack
1. Why Chroma?
Most color tools give you a palette and stop there. Chroma is an end-to-end color intelligence platform — from generation to accessibility validation to production-ready export in every major design and development format.
2. Feature Breakdown
Palette Engine
- 6 harmonic schemes: Analogous, Complementary, Triadic, Monochrome, Split-Comp, Tetradic
- Named palette scoring: "Ocean Current", "Power Duo", "Festival Bloom"
- Full shade system (50–900 stops) for design token compatibility
AI Palette Generator
Describe your brand, app, or mood in natural language → get an instant palette.
Input: "luxury fintech app, dark mode, trustworthy and premium"
Output: Deep navy primary · Muted gold accent · Slate neutral system
Accessibility (WCAG 2.1)
- Contrast ratio checker for every palette color vs white/black
- AA (4.5:1) and AAA (7:1) pass/fail badges
- Color blindness simulation: Protanopia · Deuteranopia · Tritanopia · Achromato psia
Context Preview
See your palette applied to real UI components: Mobile App, Website Hero, Button States, Cards.
Export (7 formats)
/* CSS Custom Properties */
:root {
--color-primary-500: #5F9FB9;
--color-primary-600: #417D96;
/* ... full shade system */
}
// Kotlin / Jetpack Compose
val Primary500 = Color(0xFF5F9FB9)
val Primary600 = Color(0xFF417D96)
Tools
- Dark Mode Generator — auto-generates Android dark theme from base palette
- Gradient Builder — CSS gradients at 5 angles (0°, 45°, 90°, 135°, radial)
- Palette Score — quality analysis: contrast, hue harmony, saturation, accessibility
3. Why Android XML + Kotlin/Compose?
No other free color tool exports directly to Android Material You format. This was a deliberate gap identified by talking to Android developers who constantly copy-paste hex values manually into their color resource files.