🎨 なぜ Color Kit を作ったのか

Webサイトのカラー指定といえば、これまでは #000000 や #ffffff のようなHEXコードが定番でした。

ですが最近は CSS の新構文 rgb(0 0 0 / .5) のように透明度付きの modern rgb を使うことが増えました。

たとえば次のようなスタイルを使いたいとき：

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

このように、透明度で色の強弱をコントロールしたい場面が増えたのです。

でもHEXコードから手動で変換するのはちょっと面倒… そんなニーズから生まれたのが Dottiq Color Kit です。

💡 機能紹介

Color Kitでは以下のような変換をワンクリックで実現できます：

  • HEX → rgba
  • HEX → modern rgb
  • rgba → HEX
  • modern rgb → HEX

しかも変換した色はその場でプレビュー可能。背景が透けて見えるチェック模様付きなので、透明度の差もひと目でわかります。

「見て・変換して・コピーする」を一画面で完結できるUXを目指しました。

🔧 入力の柔軟性

# 自動補完

たとえば「fff」と入力したら、自動で「#fff」に補完されます。

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

全角→半角変換

「＃ＦＦＦＦＦＦ」など、全角で入力されても以下の処理で自動修正：

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

try/catchでエラー防止

「#ggg」や「rgba(255,255)」のような不正な形式もクラッシュせず処理します。

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

ユーザーがストレスを感じずに試せるように、入力にはかなり柔軟性を持たせています。

🎛 背景処理とプレビューの演出

Color Kit の大きな特徴のひとつが「プレビューの美しさと分かりやすさ」です。

なぜ市松模様なのか？

透明度が含まれるカラーを見分けやすくするには、背景に「濃淡のある模様」が必要です。

PhotoshopやFigmaでもおなじみの「市松模様（チェッカー柄）」は、透明度を視覚的に判断するのに最も適しています。

background-color ではなく background を使う理由

プレビューの背景は background-color ではなく background プロパティを使っています。

その理由は background-image との併用。チェッカー柄をCSSグラデーションで描画しており、background で一括指定することで正しく重ねて表示できます。

!important の必要性

プレビュー表示の色を上書きするために、!important を使ってCSSの競合を防止。

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

transition でふわっと変化

変換ボタンを押したときに色がパッと変わるのではなく、transition を使ってスムーズに変化します。

transition: background 0.2s ease;

わずかな演出ですが、これだけで使用感が一段上がります。

📋 コピーUIの工夫

「コピーしました！」という手応えのないツールはストレスになります。Color Kitではコピーの演出にもこだわりました。

クリック時のアニメーション再発火

コピーアイコンをクリックすると、一瞬拡大するようなアニメーションが発生。

これを毎回確実に起こすために、一度クラスを外して再付与しています：

button.classList.remove('animated');
void button.offsetWidth; // 再計算で再発火
button.classList.add('animated');

navigator.clipboard.writeText() の使い方

クリップボードに文字列をコピーするには、以下のように非同期で処理します：

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

📋 コピーしました！の演出

コピー成功時には一瞬だけメッセージが出現。これにより「本当にコピーされた？」という不安を解消し、安心して使える設計にしています。

🔍 よくある失敗と工夫

色に関する入力ミスは意外と多く、「#ggg」「rgba(255,255)」「rgb(255 255)」など、形式の揺らぎがよく見られます。

少々のミスは寛容に受け止める

Color Kit では完全一致を強制せず、「これは多分こうだよね」と判断して変換処理を試みます。

たとえば、

  • カンマ抜けの rgba(255 255 255 0.5)
  • 空白多めの rgb( 255 , 255 ,255 )
  • 一桁HEXの #f

なども正しく処理できるよう工夫してあります。

失敗しても落ちない

もちろんどうしても処理できない場合は、エラーとして処理しつつツール全体が止まらないよう try/catch を導入しています。

🛠 カラー指定Tips（テンプレート集）

変換だけでなく、実際に使える色のテンプレートも参考になるはず。

  • モーダル用の透明黒
    rgb(0 0 0 / .6)
    背景に動画や写真があるとき、モーダルの背面として最適。画面を暗くしすぎず、自然な重なり感を出せます。
  • 淡いアクセント
    rgb(255 255 255 / .05)
    ボーダーや背景にほんのり効果を加えたいとき。白っぽく見せたいけど主張はさせたくない、そんな場面に。
  • Tailwindカラーに寄せた色指定
    #0ea5e9（sky-500）、#facc15（yellow-400）など
    デザインシステムと合わせたい人にも便利。Tailwindのカラー名で使っているコードを貼っても変換できます。

🔄 Code Kit / Text Kit とのつながり

Dottiqシリーズとして、Color KitはText KitやCode Kitと同じ思想・同じ設計で作られています。

なぜ統一UIにしているのか？

ボタンの見た目やレイアウト、コピー機能のUIなどを共通にすることで、「初めてでも迷わない」「別のツールに移っても使い勝手が変わらない」体験を提供できます。

たとえば Code Kit では CSSのビューティファイやミニファイ、Text Kit では文字数カウントや改行削除など、機能は違ってもUIは共通。

育てるツールという発想

一度作って終わりではなく、実際に使いながら育てていく。フィードバックをもとに機能を拡張し、UIを改善する。

そんな「育てるツール」としてColor Kitも進化を続けています。

🚀 今後追加したい機能

現状でも実用的ですが、Color Kitはまだまだ伸びしろのあるツールです。今後追加したい機能を紹介します。

  • グラデーション生成
    2色以上を選んで、線形・円形のグラデーションを自動生成。CSSコードも即コピーできるように。
  • カラーピッカー
    カラーホイールやスポイトツールで直感的に選べるUIを追加予定。
  • アクセシビリティチェック
    文字色と背景色の組み合わせでWCAG基準を満たすか自動で評価。スコア表示付きで改善提案も。
  • Tailwindカラー名への変換
    HEXやrgbコードから、近いTailwindの色名を逆引きする機能。デザイナーと開発者の連携をスムーズに。

✏️ おわりに

Dottiq Color Kit は、ただ色を変換するだけのツールではありません。

「その場で確認できて」「ストレスなく使えて」「デザインの流れを止めない」──そういう体験を届けるために設計しました。

今後もDottiqシリーズの一員として、より実践的に、より気持ちよく使えるようアップデートしていきます。

あなたの制作現場でも、きっと役立ってくれるはず。ぜひ使い倒して、意見も聞かせてください！

Dottiq Color Kit をぜひ一度使ってみてください。