🎨 Why I Created Color Kit

For years, color definitions in web design have centered around HEX codes like #000000 or #ffffff. They’re simple and familiar—but not always ideal.

Recently, CSS introduced a cleaner, more readable way to define colors with transparency using the modern rgb() format:

.title {
  color: rgb(0 0 0 / 1);
}
.title-sub {
  color: rgb(0 0 0 / .5);
}

This syntax is easier to read and makes it intuitive to adjust color opacity. I wanted to switch from HEX to transparency-based design—but doing that by hand was tedious.

That’s when I decided to create Dottiq Color Kit: a tool that makes converting and previewing colors faster, smoother, and honestly more fun.

💡 Core Features

Color Kit provides fast one-click conversion between:

  • HEX → rgba
  • HEX → modern rgb (space-separated + alpha)
  • rgba → HEX
  • modern rgb → HEX

Each converted result is immediately previewed in a live swatch with a checkerboard background, so you can see transparency clearly—just like in design tools like Figma or Photoshop.

🔧 Input Flexibility

Auto-add # if missing

If you enter just fff, it will automatically be interpreted as #fff. No need to worry about missing the hash mark.

if (!input.startsWith('#')) {
  input = '#' + input;
}

Full-width to half-width conversion

Users in East Asia (especially Japan) sometimes enter full-width alphanumeric characters—used by IMEs—like ＃ＦＦＦＦＦＦ.

Color Kit automatically converts these into standard half-width forms like #ffffff using a simple function:

function toHalfWidth(str) {
  return str.replace(/[！-～]/g, function(c) {
    return String.fromCharCode(c.charCodeAt(0) - 0xFEE0);
  }).replace(/\u3000/g, ' ');
}

Error handling with try/catch

Even if you enter something invalid—like #ggg or rgba(255,255)—Color Kit won’t crash. It just catches the error and shows a safe fallback.

try {
  const color = parseColor(input);
} catch (e) {
  console.warn('Invalid color:', e.message);
}

The goal is zero stress, even when your input isn’t perfect.

🎛 Background Preview UX

One of Color Kit’s best features is its live preview panel, which gives instant visual feedback on your converted color.

Why the checkerboard background?

Design tools like Figma and Photoshop use a checkerboard to show transparency—and for good reason. It clearly reveals the difference between 100% solid and semi-transparent colors.

Why use background instead of background-color?

Because the preview needs both a background pattern and a color overlay, we use the full background shorthand. This ensures both layers display correctly without conflicts.

The role of !important

To reliably override any previous styles and ensure the preview works consistently, the background value is applied with !important:

.preview {
  background: var(--converted-color) !important;
}

Smooth transitions with transition

Instead of snapping instantly, the preview background fades in smoothly:

transition: background 0.2s ease;

It's a small touch, but it improves the feel of the tool immensely.

📋 Copy UI Enhancements

Good UI gives feedback. When you copy a color value, you should feel confident it worked. Color Kit makes sure of that.

Click animation via class re-trigger

The copy icon slightly “pops” when clicked. This is done by removing and re-adding a CSS class:

button.classList.remove('animated');
void button.offsetWidth; // trigger layout reflow
button.classList.add('animated');

Using navigator.clipboard.writeText()

Color Kit uses the modern clipboard API for fast, secure copying:

navigator.clipboard.writeText(text).then(() => {
  showSuccessMessage();
});

“Copied!” message for reassurance

A friendly “📋 Copied!” message appears momentarily after copying, so users know their click was successful. These little touches reduce anxiety and create trust.

🔍 Common Mistakes and Smart Fixes

Users often input slightly invalid color values like:

  • #ggg (invalid HEX)
  • rgba(255,255) (missing components)
  • rgb( 255 , 255 ,255 ) (extra spaces)

Be forgiving, not rigid

Instead of failing hard, Color Kit tries to auto-correct or handle ambiguous inputs with grace. The idea is to “do what the user meant” whenever possible.

Robustness above all

Any critical errors are caught and logged—but the tool stays functional and doesn’t crash. This resilience makes it safe to experiment without fear.

🛠 Handy Color Snippets

Here are some practical color snippets you can use right away—great for UI designers and frontend developers alike.

  • Modal overlay (semi-transparent black)
    rgb(0 0 0 / .6)
    Perfect for darkening backgrounds without completely hiding them. Common in modals and popups.
  • Subtle borders or accents
    rgb(255 255 255 / .05)
    Great for ultra-light outlines, hover effects, or soft surface separation.
  • Tailwind-compatible colors
    #0ea5e9 (sky-500), #facc15 (yellow-400)
    Useful if you're working within a design system or utility framework like Tailwind CSS.

🔄 Integration with Code Kit & Text Kit

Color Kit is part of the Dottiq Tools family. All tools in the series share a common UI design and development philosophy.

Why a consistent UI?

When tools look and behave the same way, users don’t need to re-learn anything. Whether you’re copying a color in Color Kit or formatting CSS in Code Kit, the experience is familiar and smooth.

A tool that grows with you

These aren’t one-off utilities. Dottiq Tools are meant to evolve—based on user feedback, real-world use, and design trends. They're “living tools” you can rely on long-term.

🚀 Planned Features

Color Kit is already useful—but there’s much more coming. Here’s what’s on the roadmap:

  • Gradient generator – Easily create linear and radial gradients from two or more colors.
  • Color picker – Interactive UI for selecting and adjusting colors visually.
  • Accessibility checker – Analyze color contrast and WCAG compliance for foreground/background pairs.
  • Tailwind color name converter – Paste a HEX code and get the closest Tailwind class name.

All upcoming features will follow the same simple, fast, and consistent Dottiq UI style.

✏️ Final Thoughts

Dottiq Color Kit isn’t just a converter—it’s a design assistant.

Whether you’re tweaking transparency for better layering or matching a design system’s colors, Color Kit helps you get there faster, with less friction and more clarity.

As part of the growing Dottiq ecosystem, it's built to stay useful, evolve with your needs, and bring a little joy to the everyday workflow of web design.

Try it out. Push its limits. And if you’ve got ideas to make it better—reach out. It’s a tool that thrives on real-world feedback.

Give Dottiq Color Kit a try and see how it fits into your workflow.