すべての色を、解読する
HEX、RGB、HSL、CMYK値。カラーハーモニー、Tailwindシェード、WCAGコントラスト。
6桁のHEXコードを入力
注目のカラー
注目のブランド
すべて見る →
Organize the world's information
4色
Apple
Think different
3色
Microsoft
Empower every person and organization
4色
Amazon
Work hard. Have fun. Make history.
2色
Meta
Helping people connect
1色
Bringing the world closer together
2色
YouTube
Broadcast yourself
1色
Capture and share the world's moments
3色
注目のコレクション
すべて見る →カラーツール
すべて見る →コントラストチェッカー
WCAG 2.1ガイドラインに基づいてカラーコントラスト比を確認します。通常テキストと大きなテキストのAA・AAA準拠をテストします。
カラーコンバーター
HEX、RGB、HSL、HSV、CMYK、OKLCHのカラーフォーマット間を即座に変換します。
パレットジェネレーター
補色、類似色、トライアド、スプリットコンプリメンタリー配色を使用して調和のとれたカラーパレットを生成します。
シェードジェネレーター
デザインシステム向けに、あらゆるベースカラーからTailwind CSSスタイルのシェードスケール（50～950）を生成します。
色覚異常シミュレーター
第二色覚異常、第一色覚異常、第三色覚異常、全色盲の状態で色がどのように見えるかシミュレーションします。
グラデーションジェネレーター
ライブプレビューとコピー可能なコードで、美しいCSSリニア・ラジアルグラデーションを作成します。
最新記事
すべて見る →CSS color-mix()：ブラウザでネイティブにカラーをブレンド
CSS color-mix()を学んでブラウザでネイティブにカラーをブレンドします。構文、カラースペース、実践的な使用例をマスターし、JavaScriptなしで動的パレットを作成します。
1月 26, 2026
チュートリアルカラーピッカーWebコンポーネントをゼロから構築する
アクセシブルなカラーピッカーをWebコンポーネントとして構築する。Canvasレンダリング、色相スライダー、アルファチャンネル、Shadow DOMを使ったカスタムイベントの実装方法を解説。
1月 21, 2026
チュートリアル知覚的色空間：Lab、LCH、Oklab、OKLCH
知覚的に均一な色空間について探索します——CIE Lab、LCH、Oklab、OKLCH。それぞれがどのように設計されたか、どこで優れているか、およびCSSとデザイン作業で使用するものを学びます。
1月 15, 2026
チュートリアル色校正：印刷色の正確さを確保する
ソフト校正、ハード校正、プレス校正技術を学び、スクリーンから最終出力まで印刷色再現の正確さを確保します。
1月 10, 2026