Question 1

HEX・RGB・HSLの違いと使い分けは？

Accepted Answer

HEX (#FF5733): Webで最も一般的。6桁16進数でRGBを表現。コンパクトで覚えやすい。RGB (255, 87, 51): 数値で直感的。JavaScriptのCanvas API・Three.jsでよく使用。HSL (hue, saturation%, lightness%): 色相・彩度・明度で指定。色を調整しやすい（明度を上げるだけで明るい色に）。Tailwindでは全形式対応。デザインツール(Figma)はHSLが直感的。

Question 2

JavaScriptでHEXカラーをRGBに変換する方法は？

Accepted Answer

`function hexToRgb(hex) { const r = parseInt(hex.slice(1,3), 16); const g = parseInt(hex.slice(3,5), 16); const b = parseInt(hex.slice(5,7), 16); return {r, g, b}; }`。短縮形 #RGB への対応: `hex.replace(/^#(.)(.)(.)$/, "#$1$1$2$2$3$3")`で展開。逆変換: ``#${r.toString(16).padStart(2,"0")}${g.toString(16).padStart(2,"0")}${b.toString(16).padStart(2,"0")}``。ライブラリ: `chroma-js` や `color` パッケージが型変換を網羅的に処理。

Question 3

CSSのrgba()やhsla()で透明度を指定するには？

Accepted Answer

rgba(R, G, B, alpha): alpha は 0（透明）〜1（不透明）。例: `rgba(255, 87, 51, 0.5)` → 半透明オレンジ。hsla(H, S%, L%, alpha)も同様。HEX 8桁表記: `#FF573380`（最後の2桁がalpha、00=透明、FF=不透明）。CSS変数を使った透明度制御: `--color-primary: 255 87 51; background: rgb(var(--color-primary) / 0.5);`（Tailwind v3スタイル）。

カラーコード変換ツール

カラープレビュー

HEX

RGB

HSL

このツールをもっと活用する

チートシート・テンプレート集

技術記事・実装ガイド

もっと学びたい方へ

BOOTH Store

Gumroad Store

TechBoost

フィードバック

EZARK Blog