In the world of web development and design, choosing and adjusting colors is a daily task—one that often requires precision and flexibility.

HTML and CSS offer several ways to define colors, but since different syntaxes are used in different contexts, designers and developers frequently need to convert between formats.

To address this, we’ve updated both the Japanese and English versions of our free tool, Dottiq Color Kit, with powerful new features for color code conversion.

This update transforms Color Kit from a simple conversion utility into a tool that supports creative workflows by generating related color variations and improving copy functionality.

🎨 What Are HEX, rgb, and Other Color Formats?

Let’s take a quick look at the most common color notations used in web design:

  • HEX (hexadecimal): #ffcc00 – a classic and compact 3- or 6-digit representation.
  • rgb(): rgb(255, 204, 0) – defines red, green, and blue values (0–255).
  • rgba(): rgba(255, 204, 0, 0.5) – adds transparency (alpha) to rgb.
  • modern rgb: rgb(255 204 0 / 1) – a newer CSS syntax using spaces and slash to include alpha.

For example, while a design tool like Figma might give you a HEX code, your CSS framework (like Tailwind) may expect modern rgb. In such cases, a converter like Color Kit is a real time-saver.

🚫 Why We Removed rgba(): Not Recommended Anymore

As part of this update, we decided to remove the rgba() format from the output. The main reason is that modern rgb syntax (e.g., rgb(255 204 0 / 1)) has effectively replaced rgba() as a cleaner and more future-proof alternative.

Modern rgb uses space-separated values and a slash to define alpha transparency, making it more concise, readable, and consistent with modern CSS standards. It is already well-supported in all major browsers.

On the other hand, rgba() relies on older syntax with comma-separated values and redundant parentheses. Since its functionality is fully covered—and improved upon—by modern rgb, there is little reason to keep it.

At Dottiq, we aim to focus on modern, practical formats that reflect current best practices in web development.

🌈 New Feature: Automatically Generate Related Colors

The most significant new feature is automatic generation of color variants based on your input. The tool now creates:

  • Complementary: a color 180 degrees opposite on the color wheel
  • Lighter: same hue, higher lightness
  • Darker: same hue, lower lightness
  • Analogous+: hue shifted +30 degrees
  • Analogous−: hue shifted −30 degrees

Each variant is displayed in both HEX and modern rgb format, complete with a mini color preview and a one-click copy button. This makes it easy to compare and apply colors visually and quickly.

📋 Copy Format Toggle: HEX or rgb

Previously, Color Kit only allowed copying HEX values. With this update, you can now toggle between HEX and rgb formats before copying. For example:

  • Using in design software → HEX
  • Embedding in CSS → rgb

The toggle updates in real-time, and all copy buttons reflect your chosen format. This small detail significantly streamlines your workflow.

🛠️ How Are Complementary Colors Calculated?

Here’s a quick peek behind the scenes. Color Kit doesn’t use pre-set templates—it calculates related colors dynamically by converting RGB into the HSL color space (Hue, Saturation, Lightness).

Here’s a simplified version of the conversion logic:

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h *= 60;
  }
  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
}

Once we have the hue (H), we apply offsets like +180 (complementary) or ±30 (analogous), adjust lightness (L) by ±20, and then convert it back to RGB for display. The process is fully dynamic and works with any color you enter.

🔁 What’s Next for Color Kit?

With this update, Color Kit has evolved from a simple color converter into a more creative companion that suggests alternative color options based on your input.

Looking ahead, we’re planning to add:

  • Automatic gradient generation
  • Accessibility checks (contrast ratio analysis)
  • Integration hints for frameworks like Tailwind CSS

We’re excited to continue improving the tool in small but meaningful steps.

Dottiq Color Kit