色 色葉 IROHA — 総合カラーツール
今日の色 —
※ 日付に対応する色は、参照する誕生色の体系や出典によって異なる場合があります。
Color Converter

色を選んで、あらゆる形式で確認する

HEX・RGB・HSL・HSV・CMYK に加え、Android（0xAARRGGBB）や iOS（UIColor）のコード表現まで一括変換。近い日本の伝統色も自動で提案します。

最近使った色
近い伝統色
—
—
Curated Palette Library

お題別の参考カラーパレット

「夏っぽい配色」「寒色でまとめたい」など、シーン・季節・印象別にすぐ使えるパレット集。丸いチップで色相のバランスを一目で確認しつつ、下のベタ塗りブロックで実際の質感やイメージを確かめられます。クリックでコピーできます。

Color Harmony

配色ルールと反対色を可視化する

基準の色を選ぶと、補色・分割補色・トライアド・テトラード・アナログ配色・トーン展開をカラーホイール上と一覧の両方で確認できます。

基準色を入力するか、ホイールをドラッグして選択
和色大全 — Traditional Colors of Japan

日本の伝統色を、漢字で味わう

平安から江戸にかけて育まれた和色を194色収録し、系統・季節別に一覧化。カードをクリックすると漢字を大きく掲げた印譜（スタンプ）風の詳細を表示します。「日本の伝統色465色」等と紹介されることもありますが、資料によって収録色や表記に幅があるため、本ツールでは広く一致して紹介される色を中心に収録し、随時追加していきます。色値は現代のディスプレイ向けの参考近似値です。

Extract From Image

写真から、色を読み解く

画像をアップロードすると、主要な色を自動抽出し、それぞれに最も近い日本の伝統色を対応させます。「この写真、何色でできている？」を確かめるページです。

🖼️
クリックして画像を選択、またはドラッグ&ドロップ
Accessibility Tools

読みやすさと見え方を確かめる

文字色と背景色のコントラスト比をWCAG基準で判定し、色覚多様性（P型・D型・T型・モノクロ）での見え方もあわせてシミュレーションします。

コントラストチェッカー

読みやすさの確認 Aa
小さな文字でもコントラストが十分か確認できます。The quick brown fox.
—

色覚シミュレーター

確認したい色を選ぶと、色覚タイプ別の見え方を並べて表示します。

💡 このツールの独自機能： 近似伝統色サジェスト／季節・印象別パレット集／配色ホイールでの補色可視化／和色を漢字中心で見せる印譜風カード／今日の色／画像からの伝統色抽出／WCAGコントラスト判定と色覚シミュレーター／伝統色×現代色のマッシュアップ提案／デザイントークン書き出し。
コピーしました
💡

Webデザインにおけるカラーシステム・アクセシビリティ・和色の基礎知識

「色を数値で扱う」「色を誰にでも読みやすく届ける」「色に込められた日本の美意識を知る」——このツールが横断する3つの視点を、実務で使えるレベルまで掘り下げて解説します。

🎨

HEX・RGB・HSL の仕組みと使い分け

Webで使われる主要なカラー表記には、16進数2桁×3で色を示すHEX（例: #8C333B）、光の三原色を0〜255の数値で指定するRGB（例: rgb(140, 51, 59)）、色相・彩度・明度で直感的に指定するHSL（例: hsl(355, 47%, 37%)）の3種類があります。HEXはCSSやデザインツールでの受け渡しに便利な短い表記、RGBは光の加算混色の仕組みをそのまま反映した表記、HSLは色相環をベースにした人間の感覚に近い表記です。

  • H色相（0〜360°）。0=赤、120=緑、240=青と色相環を一周する
  • S彩度（0〜100%）。0%で無彩色、100%で最も鮮やか
  • L明度（0〜100%）。0%で黒、50%で純色、100%で白

HSLはHの数値を固定したままLだけを動かせば「同系色の濃淡（トーン展開）」を機械的に作れるため、ボタンのhover/active色やテーマカラーの明暗バリエーションを組む際に重宝します。近年はより人間の知覚に忠実なOKLCHのような色空間も使われ始めていますが、ブラウザ間の対応状況を踏まえてHEX/RGB/HSLの3表記を押さえておけば実務上はほぼ困りません。本ツールの変換ページでは、これらを含む複数形式へワンクリックで変換できます。

♿

WCAG 2.1 とコントラスト比

Webコンテンツのアクセシビリティガイドライン（WCAG 2.1）は、ロービジョンや高齢者、色覚の多様性を持つユーザーを含む、すべての人がテキストを快適に読めるよう、背景色と文字色のコントラスト比に数値基準を設けています。比率は2色の相対輝度から算出され（(L1+0.05)/(L2+0.05)、L1は明るい方の輝度）、1:1〜21:1の範囲で表されます。

  • AA通常テキスト 4.5:1 以上／大きな文字（18pt以上、または太字14pt以上）は 3:1 以上
  • AAA通常テキスト 7:1 以上／大きな文字は 4.5:1 以上
  • 1.4.11ボタン枠やアイコンなど非テキストのUI部品は 3:1 以上
  • 1.4.1「赤字は必須項目」のように色だけに意味を持たせない設計も推奨

サイト内の「色覚シミュレーター」では、P型・D型・T型（それぞれ赤・緑・青系の色覚特性）やモノクロでの見え方を確認できます。コントラスト比とあわせて使うことで、色相だけに頼らない配色設計ができているかを実際の見え方でチェックできます。

🌸

日本の伝統色（和色）の由来と美意識

平安時代や江戸時代に育まれた和色は、四季折々の植物（桜・藤・松）、動物（鶯・狐）、自然現象（あけぼの・夕やけ）、染料の原材料（藍・茜・紫根）などから名付けられています。平安貴族は「重ねの色目（かさねのいろめ）」と呼ばれる衣の配色で季節や情趣を表現し、律令制の「冠位十二階」では紫や深緋など特定の色が高位者だけに許される禁色として扱われました。

江戸時代になると藍染・紅花染めなど庶民の染色文化が花開き、歌舞伎役者の名を冠した「団十郎茶」「路考茶」のように流行色が生まれる一方、奢侈禁止令の下で「四十八茶百鼠」と呼ばれるほど茶と鼠色の微妙な濃淡が発達しました。

こうした一色ごとに情景や物語を背負う和色は、単色では出せない情緒をWebデザインのアクセントカラーやブランドカラーに与えてくれます。色名カードでは、由来や伝承（まつわる話）もあわせて紹介しています。

よくある質問

コントラスト比はどのように計算していますか？
WCAG 2.1で定義された相対輝度（relative luminance）の算出式に基づき、sRGBのRGB値をガンマ補正した上で2色の輝度比を計算しています。ブラウザ内のJavaScriptで即座に算出しているため、外部サービスへの送信は発生しません。
画像から抽出された色の精度について教えてください。
アップロードされた画像の主要色をブラウザ側（HTML5 Canvas）で解析・抽出しています。元画像の照明条件や圧縮ノイズ、ディスプレイのカラープロファイルによって、抽出値や見え方が実物の色とわずかに異なる場合があります。
入力データや画像は外部に送信されますか？
いいえ。画像解析、コントラスト計算、色覚シミュレーションなどの処理はすべてお使いのブラウザ内（クライアントサイド）で完結しており、画像データや入力した色情報がサーバーへ送信されることはありません。
「日本の伝統色465色」のような紹介と収録数が異なるのはなぜですか？
伝統色は文献や資料によって色名の表記・読み・色値に幅があり、統一された公式リストが存在するわけではありません。本ツールでは複数の資料で広く一致して紹介される色名を中心に収録し、由来のはっきりした色を随時追加しています。
色覚シミュレーターの見え方はどこまで正確ですか？
一般的な色覚特性の変換アルゴリズムに基づく近似シミュレーションであり、実際の見え方には個人差があります。あくまで「色だけに頼った設計になっていないか」を確認するための参考ツールとしてご利用ください。
表示されている伝統色の色値は、歴史的な染料の色そのものですか？
いいえ。天然染料による色は光源や経年変化で見え方が変わるため、本ツールの色値は現代のディスプレイで再現しやすいよう定めた参考近似値です。史料や実物の染織品とは色味が異なる場合があります。