画像の編集・解析

64ビットのハッシュを持つ5枚の画像を、しきい値5ビットで調べると2つのグループになります。バナーの3つの版とロゴの2つの版で、5枚すべてが重複です。名前とハッシュを貼り付けるだけで、画像は送りません。ブラウザで無料で使えます。

カメラが書き込んだ2023:06:15 14:30:45を、2023-06-15と14:30:45、さらに2023-06-15T14:30:45という読みやすい形に変換します。存在しない日付は弾き、タイムゾーンを勝手に付けることもありません。ブラウザで無料で使えます。

写真のメタデータを削除前と削除後で比べ、位置情報が残っていないことを確かめます。例では緯度・経度・高度の3つのタグが削除済みとして示され、GPSのタグが1つでも残れば確認は不合格になります。ブラウザで無料で使えます。

1920×1080の画像を50パーセントにすると960×540ピクセルになり、画素数は半分ではなく4分の1になります。元のサイズとパーセントを入れると、新しい幅と高さ、メガピクセル数が分かります。ブラウザで無料で使えます。

1200×800の画像を1601×1001のキャンバスに置くと、余白は左200px、右201px、上100px、下101pxです。画像のピクセルはそのままで、切り抜きも引き伸ばしもしません。ブラウザで無料で使えます。

ピクセル一覧の赤を緑に置き換えます。許容誤差を32にすると、純粋な赤と赤に近い2色が変わり、5ピクセル中3ピクセルが置き換わります。チャンネルごとに比べるので、輪郭の陰影も拾えます。ブラウザで無料で使えます。

1200×800の写真2枚でスライダーを37.5%にすると、境界線は450ピクセルの位置になり、左の450ピクセルにビフォー、残りの750ピクセルにアフターが表示されます。横並びなら幅が2倍のキャンバスになります。ブラウザで無料で使えます。

どんなサイズの画像でも、三分割法のガイド線の位置を正確に求めます。1200×800の画像なら縦線は400と800ピクセルの位置になり、横線2本と4つの交点も、小数を丸めずに示します。ブラウザで無料で使えます。

横幅4000ピクセルの写真3枚を30%と25%重ねると、パノラマの横幅は12000ではなく9800ピクセルになります。写真を順番に入力すると、最終的な横幅、重なった画素数、高さが分かります。ブラウザで無料で使えます。

24×24のviewBoxを2倍で書き出すと、48×48のPNGになります。viewBoxと倍率または目標の横幅を入れると、整数のピクセル数、縦横比、メガピクセル数が分かります。計算するのはサイズだけで、画像は作りません。ブラウザで無料で使えます。

DCI-P3はsRGBの約126%の面積を持ち、sRGBの三角形をすべて含みます。一方、Adobe RGBとDCI-P3はそれぞれ相手にない色まで届きます。2つの色空間を並べて、どこで使われるかも確認できます。ブラウザで無料で使えます。

色相環で真向かいにある色を、彩度と明度を保ったまま作ります。#336699からは#996633が得られ、カラーコードとRGBの両方で返るので、2色構成の画面やグラフ、イラストにすぐ使えます。ブラウザで無料で使えます。

sRGBカラーのCIE 1931 XYZ値を求めます。オレンジの255, 128, 0は0〜100の目盛りでX 48.96429558、Y 36.70460115、Z 4.50627447です。Labへの変換やプロファイルの比較の出発点になります。ブラウザで無料で使えます。

明度53.2407941413、a 80.0924595964、b 67.2031965159のLAB色は、rgb(255, 0, 0)、つまり純粋な赤#FF0000になります。ブランドブックのLAB目標値を、毎回同じ結果で画面の色に移せます。ブラウザで無料で使えます。

RGBカラーを人が調整する感覚で表します。明度は黒の0から白の約100まで、クロマは鮮やかさ、色相は0から360°未満の角度です。ほかの値を崩さずにひとつだけ変えられます。ブラウザで無料で使えます。

RGBカラーのOKLCH座標を求めます。255, 87, 51は明度0.680358、彩度0.210012、色相33.691637°になります。見た目で均等に感じる段階のスケールやパレットを作れます。ブラウザで無料で使えます。

RGBカラーを明るさと2つの色差に分けます。オレンジの255, 128, 0はBT.601の重みでY 0.5936509804、U −0.2921263922、V 0.3564952157になります。映像や画像処理の計算確認に便利です。ブラウザで無料で使えます。

Y、I、Qを画面の色に変えます。0.5、0.5、0.5なら赤255、緑10、青204、つまり#ff0accになり、赤が1.2885から切り詰められたことも示されます。範囲外の値は受け付けません。ブラウザで無料で使えます。

印刷用のインキ配合を色相・彩度・明度に置き換えます。C0 M50 Y100 K0はRGB 255、128、0を経て、彩度100 %・明度100 %のオレンジになります。途中の計算も表示されるので確かめられます。ブラウザで無料で使えます。

HSVからHSLへ、推測なしで色を移します。色相210、彩度70%、バリュー80%は、同じ色相のまま明度52%になり、彩度はHSL用に計算し直されます。ブラウザで無料で使えます。

色相210、白色度20%、黒色度10%はhsl(210 77.78% 55%)になり、色相は入力したまま保たれます。HWBで決めたデザインの色を、迷わずHSLに移せます。ブラウザで無料で使えます。

RGBカラーのCIE 1976 Luv座標を求めます。明度L*は黒の0から白の約100まで、u*とv*はD65の白からの位置を表します。加法混色や色度の距離を扱うときに向いています。ブラウザで無料で使えます。

色を色度と明るさに分けます。X 41.24、Y 21.26、Z 1.93は、CIE 1931色度図に使えるxとyの座標の組になり、輝度Yは21.26のまま残ります。すべてゼロの入力は受け付けません。ブラウザで無料で使えます。

省略形をブラウザが使う長い形に直します。各桁を二回重ねるので#f0aは#ff00aaになり、大文字の#FF00AAと、チャンネル値255、0、170も得られます。ブラウザで無料で使えます。

透明度付きの十六進カラーをチャンネルごとに読み取ります。#33669980は赤51、緑102、青153、アルファ128に分かれ、アルファは0〜1の不透明度で0.501961です。ブラウザで無料で使えます。

画面の色の裏にあるプロセスインキの配合が分かります。#3498dbはシアン76%、マゼンタ31%、イエロー0%、キー14%で、標準的な減法混色の式で求めます。ブラウザで無料で使えます。

明度53.2408、aが80.0925、bが67.2032の色は#FF0000の純粋な赤になり、画面の範囲に収めるため切り詰めたことも表示されます。測定値を画面で使える色に変えられます。ブラウザで無料で使えます。

oklch(62.8% 0.258 29.23)は純粋な赤の#FF0000になり、一般的な画面に収めるため切り詰めたことも表示されます。今もhexを必要とするツール向けに、OKLCHの色からhexコードを作れます。ブラウザで無料で使えます。

パックされたRGB555の数値を通常のRGBに変換します。0x7C1Fは赤255、緑0、青255になります。各5ビット値は0〜255の範囲へ丸めて拡張されるため、レトロゲームの画像や機器のデータを実際の色として確認できます。ブラウザで無料で使えます。

X、Y、Zを入力すると、画面の色がカラーコードで得られます。0、0、0なら純粋な黒の#000000です。画面で表せない値はエラーにせず、最も近い表示可能な色に寄せます。ブラウザで無料で使えます。

ブランドの十六進カラー1つから、決まった割合でホバー時や押下時の色を作れます。#4A90D9を20 %暗くすると#2873C0になり、同じ青のままです。明度は比例して下がり、黒で止まります。ブラウザで無料で使えます。

色相を変えずに色を暗くします。HSV明度を25パーセント減らすと#40A0FFは#3078BFになり、色相と彩度は同じまま、RGBとHSVの数値も一緒に表示されます。ブラウザで無料で使えます。

べき乗の曲線で色の中間調を整えます。ガンマ2.2で#3366ccは#07229cになり、1より小さい値では明るくなり、純粋な黒と白は動きません。ブラウザで無料で使えます。

Rec. 709の輝度で#3498DBをグレーにします。0.2126×赤＋0.7152×緑＋0.0722×青は135.5774で、四捨五入すると136、無彩色のグレー#888888になります。ブラウザで無料で使えます。

比率50では#FF0000と#0000FFの重みがそれぞれ0.5になり、#800080が得られます。2つ目の色をどれだけ混ぜるかを正確に決められるので、グラデーションの各段階を後から同じように作り直せます。ブラウザで無料で使えます。

16ビットのRGB565値を普通の色として読み取れます。0xF800（63488）は純粋な赤で、255, 0, 0、#FF0000になります。赤5ビット、緑6ビット、青5ビットをそれぞれ全範囲へ拡張し、元の値も表示します。ブラウザで無料で使えます。

画面の色にケルビンの数値を付けられます。RGB 255, 200, 150は約3634.1681 Kと推定されます。CIEの色度座標とMcCamyの古典的な近似式を使うため、測色計が手元になくても目安がわかります。ブラウザで無料で使えます。

範囲外のRGB値を0～255の尺度に戻します。赤300、緑−20、青127.5は255、0、127.5になり、どのチャンネルが変わったかも分かります。途中で丸めることはありません。ブラウザで無料で使えます。

カラーバーンの描画モードと同じ方法で、ある色を別の色で暗くします。中間グレーの#808080同士を合成すると#020202になり、ほぼ黒です。順番によって結果が変わるため、下地と重ねる色を入れ替えると答えも変わります。ブラウザで無料で使えます。

HSLの考え方で十六進カラーをグレーにします。#e74c3cでは最大のチャンネルが231、最小が60なので、明度は(231 + 60) / 2 = 145.5となり、結果は#929292です。ブラウザで無料で使えます。

黄の#FFFF00と青の#0000FFを絵の具のように半分ずつ混ぜると、画面の光の混色とは違い緑の#008000になります。授業や工作、イラストで顔料のふるまいを示せます。ブラウザで無料で使えます。

ベース#336699に#FFCC00をオーバーレイすると#66A333、つまりrgb(102, 163, 51)になります。ベースの暗いチャンネルは乗算、明るいチャンネルはスクリーンで計算されるため、平均ではなくコントラストが強まります。ブラウザで無料で使えます。

#6699CCを32だけずらすと、より暖かい#8699ACになります。赤は134に上がり、青は172に下がり、緑は153のままです。-255から255までの整数で、控えめにも大胆にも調整できます。ブラウザで無料で使えます。

1ピクセルの事前乗算を元に戻します。赤0.125、緑0.25、青0.375、アルファ0.5なら、0.25、0.5、0.75に戻り、アルファはそのままです。アルファが0の場合やアルファを超える色は受け付けません。ブラウザで無料で使えます。

描画モード「比較（暗）」と同じように、チャンネルごとに暗い方の値を残して2色を合成します。#FF8800と#00AAFFからは深い緑の#008800ができます。どのチャンネルも元の色より明るくなることはありません。ブラウザで無料で使えます。

二つの色を除外モードで合成します。#336699と#CC8844からは#AD818Bができ、差の絶対値よりやわらかくコントラストの低い仕上がりで、十六進やrgb(173, 129, 139)としてそのままコピーできます。ブラウザで無料で使えます。

#808080の上に#C0C0C0を重ねると#818181になり、明るい上の色は下地を128から129へわずかに持ち上げるだけです。ピンライトは、上の色が十分に暗いか明るいときだけ下地を置き換えます。ブラウザで無料で使えます。

ひとつの16進カラーから4色のスクエア配色を作ります。#e74c3cからは#82e73c、#3cd7e7、#a13ce7が得られ、それぞれ色相環を90°ずつ進んだ色です。彩度と明度は変わらないため、4色の重みがそろいます。ブラウザで無料で使えます。

#3366ccと4ステップを指定すると、白を25、50、75、100％混ぜた#668cd9、#99b3e6、#ccd9f2、#ffffffが得られます。ステップは1〜20で選べ、同じ入力なら必ず同じパレットになります。ブラウザで無料で使えます。

文字色が背景の上でどれだけ読みやすいかを数値で確かめられます。白地に濃い#111827の文字はLc 104.5となり、色を入れ替えると符号が反転します。デザインの確認で根拠として示せる1つの数値です。ブラウザで無料で使えます。

W3Cの旧来の明るさテストで2色を比べます。黒と白の差は255で、合格に必要な125を大きく上回ります。過去の監査の再現に便利ですが、現在のアクセシビリティ判断にはWCAGのコントラスト確認を使ってください。ブラウザで無料で使えます。

2つのLab色の見た目の違いをCIE94式で測ります。印刷分野の既定値K1が0.045、K2が0.015のほか、繊維用の重み付けも選べます。途中の値をすべて示すので、検査室や取引先が結果を確認できます。ブラウザで無料で使えます。

色相200°から5色を作ると72°ずつ離れ、最初は#269dd9、最後は#26d93eになります。彩度と明度は固定なので、グラフの色が一部の色域に偏りません。ブラウザで無料で使えます。

WCAGの式で色の明るさを測ります。中間グレーの#808080は0.215860500114で、黒が0、白が1の尺度で表されます。RGBの各チャンネルと線形化した値も表示されるので、数値を確かめられます。ブラウザで無料で使えます。

赤の感度が弱い人の見え方で色をプレビューします。鮮やかな赤の#e74c3cは、既定の強さ0.6で#416f3eになります。0（変化なし）から1（ほぼ1型2色覚）まで調整し、ブランドやグラフの色を決める前に確かめられます。ブラウザで無料で使えます。

赤に反応する錐体が働かない人の見え方で色を確認できます。鮮やかな赤の#e63946は#6c6545に変わります。グラフやボタン、ステータス表示で赤と緑の状態が見分けにくくなっていないかを見つけられます。ブラウザで無料で使えます。

#6f4bb8から始めると、暖かい2色、元の色、涼しい2色の5色が得られます。各色は30度のオレンジまたは220度の青に向けて35％か70％だけ色相を動かし、彩度と明度はそのままです。ブラウザで無料で使えます。

色の組み合わせのコントラストを、レビューにそのまま書ける1文字で表します。白地に#111827は17.74対1で、Aは12対1から始まるため評価はAです。評価はAからEまであり、それ未満は不合格です。ブラウザで無料で使えます。

両端の色のあいだにあるカラーストップをすべて求めます。#FF0000から#0000FFまでを5個にすると、25%に#BF0040、50%に#800080、75%に#4000BFが入り、両端も含まれます。ブラウザで無料で使えます。

十六進カラーに含まれる不透明度を求めます。#33669980の末尾の80はバイト値128で、不透明度は多くの人が思う50%ではなく50.2%です。ブラウザで無料で使えます。