Chromasome is a simple color generator applet that spawned after getting tired of similar services that started to get bloated with ads and paywalled features. It’s live at chromasome.inmydna.com.
The name is a mix of chroma and chromosome, a nod to In My DNA. The vocabulary follows the same idea. You Mutate to get new colors, a palette is a strand, and the link you share is your Color code.
I built it with Claude Code as my coding partner. I made the calls on design, naming and what to build next, and it wrote and tested the code with me.
What It Does
- Mutate with the space bar. Every press gives you a new set of colors that go together. Lock the ones you like and they stay put while the rest change.
- Smarter colors. Mutate picks from analogous, complementary, split, triadic, tetradic and monochrome harmonies, then spaces the lightness out so no two colors blur together.
- Palette checks. Every palette gets checked against three rules: one loud color and the rest quiet, a dark, a middle and a light, and the loud one takes the least space.
- The role view. Each color gets a job, and the board can resize itself to show how much space each one should take. More on this one below.
- Squint view. Flip the whole board to greyscale to check that your values actually hold up.
- Color code. The palette lives in the link, so sharing it is as simple as copying the URL. No accounts, no sign-up.
- Extract from photo. Drop in any image and it pulls a five-color strand out of it.
- Export. CSS, SCSS, Tailwind, JSON or a PNG. The PNG can follow the role sizing too.
- Fine-tuning. Add up to ten colors, drag to reorder, adjust any color by hex or HSL, and undo or redo anything. Every color shows its closest name.
- Built for phones too. It works one-handed, and you can add it to your Home Screen so it opens full screen like an app.
The Part I’m Most Proud Of: The Role View
Most palette tools treat five colors as equals, five even stripes side by side. Real designs don’t work that way. One color covers most of the page, another holds the panels and text, and one small pop of color does all the shouting.
Chromasome gives every color a role: Background, Second, Loud, Accent and Extra. Turn on Size board by role and the columns resize to roughly 60/30/10, the share each color would take in a finished layout. You can see right away whether that bright orange works as a small accent, or whether it’s too much as a full stripe.
Hover the toggle and the palette checks pop up with a tiny mock page painted in your colors. The background becomes the page, the second color becomes a panel and the loud color becomes the button. It’s the closest thing to seeing your palette in a real composition without opening a design file.
The checks come from Alena Song’s free color lesson, which I’d recommend to anyone working with color. When something’s off, they tell you exactly what to change, like “Mute one” when two colors are both shouting.
The same idea carries into squint view, which shows your values in greyscale, and into the PNG export, which keeps the role sizing.
My Process
The first version came together in a single night at the end of September. It had the generator, locking, shareable links, export and photo extraction, and by the next morning it was live on Netlify at its own subdomain.
The next day went to polish. Buttons got press feedback, drag-to-reorder started working on touch screens, the phone layout got its own design, and links got a proper preview image.
Then I went back to color theory. After going through Alena Song’s lesson, I added the three checks, the roles, the squint view and the role-sized board. That changed Chromasome from a random color machine into something that helps you build a palette you can actually use.
The latest round was all about phones. The toolbar collapsed into one row with a menu for the extra actions, the checks became a sheet that slides up, and Chromasome can now live on your Home Screen. I tested it on my own iPhone along the way, which caught a couple of iOS quirks no simulator would show.
Small things mattered here. The plus buttons for adding a color used to sit right on top of the hex codes on smaller phones, so they moved into their own rail on the left edge.
Designing the Logo
The first mark was a simple white DNA helix. For the app icon, I wanted the mark itself to carry color.
I explored four directions for bringing a spectrum into the helix. I went with Warm + Cool: one strand runs red to yellow, the other runs green to violet, and white rungs connect them. Together the two strands cover the whole spectrum.
Then I wanted it to feel 8-bit. The first pixel version was generated from the smooth curves, and it came out lumpy. So I placed every pixel by hand on a 14 by 21 grid, gave each strand five flat color steps, and let the cool strand pass over the rungs so the twist reads clearly at any size.
The wordmark is set in JetBrains Mono, bold and all caps, for a more technical feel. Each letter of CHROMA takes one of the helix’s colors, and SOME stays white.
Try It
Chromasome is free and runs right in your browser at chromasome.inmydna.com. On a phone, add it to your Home Screen and it opens like an app.
Let me know what you think, and send me any palettes you make with it!