画像の編集・解析

カンマやパーセント記号を手で打たずに、ブラウザでそのまま使えるhsl()の値を作ります。色相210.456、彩度64.444、明度42.225は、標準の小数点以下二桁でhsl(210.46, 64.44%, 42.23%)になります。ブラウザで無料で使えます。

HSLで#ff0000と#0000ffのちょうど中間は#ff00ffです。色相は緑を通らず、マゼンタ側の短い120°の道をたどります。ホバー時の色やグラデーション、アニメーションの中間色を毎回同じ結果で作れます。ブラウザで無料で使えます。

明度0.7、クロマ0.15、色相180はoklch(0.7000 0.1500 180.00)になり、百分率ならoklch(70.0000% 0.1500 180.00)です。どのトークンやスタイルシートでも同じ書き方と桁数にそろいます。ブラウザで無料で使えます。

ドキュメントや凡例用の色見本をすぐに作れます。#3498dbは、その色で塗られ、スクリーンリーダー向けのラベルが付いた24×24のSVGの四角になります。大きさや角の丸みも必要に応じて変えられます。ブラウザで無料で使えます。

イージング曲線に沿った色の移り変わりで、ある瞬間に表示される色を正確に求めます。#ff6600から#3366ffへの中間点で曲線0.42、0、0.58、1を使うと#996680になります。アニメーションを再生する必要はありません。ブラウザで無料で使えます。

印刷機で安全に使えるリッチブラックの配合がすぐに分かります。塗工紙の枚葉印刷で標準プロファイルを選ぶと、C60 M40 Y40 K100、総インキ量240 %で、上限320 %まで80ポイントの余裕があります。ブラウザで無料で使えます。

網点が印刷でどれだけ濃くなるかが分かります。50%の網点にドットゲイン15%を見込むと、紙のおよそ65%が覆われ、グレー#595959として表示されます。レイアウトや印刷仕様の計画に使えます。ブラウザで無料で使えます。

インキの配合と総量が一度に分かります。#3498dbはシアン76%、マゼンタ31%、イエロー0%、キー14%で、合計のインキ量は121%です。ブラウザで無料で使えます。

#42A5F5を#000、#369、#ffffff、#3fa7f2と比べると、3番目の#3fa7f2に合わせられ、距離の2乗は22です。ブランドや機器、ファイル形式が許す色の範囲に収められます。ブラウザで無料で使えます。

数値に決まった色の区間を割り当てます。0〜100の目盛りを#ffffccから#800026までの5区間に分けると、72は60〜80の第4区間に入り、色は#a04050です。同じ区間の値は必ず同じ色になります。ブラウザで無料で使えます。

スポット色を4色で再現し、どこまで近いかを確認できます。RGB 200, 16, 46はシアン0 %、マゼンタ92 %、イエロー77 %、ブラック22 %になり、Delta Eは0.4385で一致度は優秀です。総インク量とプロセス色域も確認します。ブラウザで無料で使えます。

シアン・マゼンタ・イエローが重なってできるグレーをブラックに置き換えます。除去率75％なら72、64、52、18は33、25、13、57になり、総インキ量は206から128に減ります。ブラウザで無料で使えます。

色相環の真向かいにある補色を求め、2色が目にどれだけ離れて見えるかを測ります。#336699の補色は#996633で、調和度は「強い」と判定されます。パレットの色を一貫した基準で並べられます。ブラウザで無料で使えます。

白の#ffffffは輝度255で、閾値128を上回るため明るい色と判定され、黒い文字（#000000）が推奨されます。ボタンやバッジ、チップの文字色選びに使えます。ブラウザで無料で使えます。

#336699ccは正しい16進カラーです。透明度を含む8桁の完全な形だからです。3桁・4桁・6桁・8桁を#の有無にかかわらず受け付け、値を勝手に直すことはありません。ブラウザで無料で使えます。

#000000、#808080、#ffffffのうち最も明るいのは、0から数えて2番目の#ffffffで、輝度は1です。ブランド色や背景色、アクセント色を目の感じ方どおりに並べられます。ブラウザで無料で使えます。

16進カラーのグループをWCAGの輝度で暗い順に並べます。純粋な青は0.0722で黒のすぐ後に来て、純粋な赤は0.2126で中間グレーより暗い位置になります。各色は輝度付きで返ります。ブラウザで無料で使えます。

#E85D04を貼り付けると暖色と判定されます。色相が180度のシアンよりも0度の赤にずっと近いからです。色相と距離も表示されるので判定を確かめられ、ちょうど90度や270度の色は寒色として扱います。ブラウザで無料で使えます。

色相0で白色度も黒色度も0なら純粋な赤で、印刷ではC 0%、M 100%、Y 100%、K 0%になります。発注書や簡易校正に使える安定したインキの割合が得られます。ブラウザで無料で使えます。

#fff、#000、#777777、#2563ebのすべての組み合わせが1つの表で分かります。白と黒は最大の21で、各マスを通常の文字の4.5や大きな文字の3と比べられます。パレット全体を一度で点検できます。ブラウザで無料で使えます。

255, 128, 0 をRGB565の値64512（0xFC00）に変換し、画面では255, 130, 0として表示されることを確かめられます。ファームウェアの値を赤・緑・青に戻すこともできます。ブラウザで無料で使えます。

#33A1FFは赤51、緑161、青255となり、端末の文字色用のコード38;2;51;161;255になります。実際の制御文字、コピーしやすいエスケープ表記、リセットがそろい、スクリプトやログに使えます。ブラウザで無料で使えます。

解像度からピクセル数と画面用メモリが分かります。1920×1080で1ピクセル32ビットなら2,073,600ピクセル、約2.07メガピクセルで、1フレームに8,294,400バイトが必要です。ブラウザで無料で使えます。

8.5×11インチの用紙10ページを300 DPIのカラーでスキャンすると、圧縮前で252,450,000バイトになります。ページ数、解像度、用紙サイズ、色深度を入れて、スキャン作業や保存先、アップロード容量を計画できます。ブラウザで無料で使えます。

HSLの色からプロセスインキの値まで一度に求めます。色相210、彩度80%、明度45%は、RGB 23, 115, 207を経て、シアン89%、マゼンタ44%、イエロー0%、キー19%になります。ブラウザで無料で使えます。

色を、色相と白・黒の量で表します。hsl(210, 80%, 45%)は同じ色相のまま白色度9%、黒色度19%になり、hwb(210 9% 19%)と書けます。ブラウザで無料で使えます。

RGBカラーを15ビットのRGB555ワードにパックします。オレンジの255, 128, 0は32256、つまり0x7E00になります。各チャンネルの上位5ビットを残す、VGAのハイカラーモードや古いPCゲームの形式です。ブラウザで無料で使えます。

RGBカラーをTFTディスプレイ向けの16ビットワードに変換します。オレンジの255, 128, 0は64512、つまり0xFC00になります。赤5ビット、緑6ビット、青5ビットを、丸めずに切り捨てて残します。ブラウザで無料で使えます。

色をまるごと変換せず、必要な1つの数値だけを取り出せます。#3498dbの赤は52、#3498db80の透明度は128で、どちらも0～255の同じ尺度です。ブラウザで無料で使えます。

色の各チャンネルを中間グレー128から遠ざけてメリハリを出したり、近づけて落ち着かせたりできます。#3366ccに係数1.5をかけると#0d59f2になります。係数1なら何も変わりません。ブラウザで無料で使えます。

下の色と上の色をビビッドライトの方法で重ねます。グレーの#808080に明るい#C0C0C0を重ねると#FFFFFFまで明るくなります。各チャンネルを中間グレーの128と別々に比べるため、強いコントラストが出ます。ブラウザで無料で使えます。

#3366ccから5段階を作ると#000000、#193366、#3366cc、#99b2e6、#ffffffになり、どれも色相220、彩度60%のままです。ブランドの青を、濃い面から淡い背景まで青のまま保てます。ブラウザで無料で使えます。

色味を保ったまま、コントラスト不足の文字色を直します。白地の#888888は3.54:1しかないため、#767676まで暗くして4.54:1とし、目標の4.5をわずかに上回ります。変わるのは明度だけです。ブラウザで無料で使えます。

単独の色を再利用できるCSS変数にします。#3366ffに名前brand-primaryを付けると--brand-primary: #3366ff;になり、省略形は展開され、十六進は小文字にそろいます。ブラウザで無料で使えます。

文字が背景の上で読めるかを判定します。白地に#111827、16 pxの文字はコントラスト比17.74で、AAとAAAを満たします。文字の大きさと太さで、大きな文字の基準が使えるかが決まります。ブラウザで無料で使えます。

貼り付けたCSSの色を数値として読み取ります。hsl(210, 80%, 45%)は赤23、緑115、青207、つまり#1773cfになります。カンマでも空白でも、degやturnといった単位付きでも使えます。ブラウザで無料で使えます。

紺の#3366ccをクリーム色の用紙#f5e6c8に全面で刷ると#315ca0に見え、画面よりわずかに暗く温かみが出ます。招待状やレターヘッド、封筒を刷る前に、実際の用紙でのブランドカラーを確かめられます。ブラウザで無料で使えます。

16進数カラーを並べて入力すると、全体を代表する1色が分かります。#FF0000、#00FF00、#0000FFの平均は#555555です。各チャンネルの単純な平均なので、表計算ソフトで求めた値と一致します。ブラウザで無料で使えます。

#EE204Dは定番の64色セットのRedと完全に一致し、距離は0です。写真やワークシートから拾った色を、子どもが実際に手に取れるクレヨンに結び付けられます。ブラウザで無料で使えます。

まばたき率0.1、目標0.99なら必要なのは3枚です。2枚ではちょうど0.99で目標を超えないため、3枚目で初めて上回ります。肖像写真や集合写真、学校の撮影の計画に役立ちます。ブラウザで無料で使えます。

レスポンシブな枠に使うpadding-topのパーセント値を、高さを幅で割って100を掛けて求めます。1600×900の動画も、160×90のサムネイルも、16×9の枠も同じ値になります。埋め込みや古いスタイルシートに便利で、ブラウザで無料で使えます。

4:3で表示する720×480の映像は、画素の形が正方形ではなく8:9です。表示比と記録解像度を入れると1画素の形が分かり、DVやDVD、標準画質の映像でも円が丸いまま保てます。ブラウザで無料で使えます。

1080×1350の縦向き画像は、両辺を270で割れるので4:5になります。縦長の画像の幅と高さを入れると、約分した比と小数が分かり、投稿やストーリー、プリント、壁紙の管理に使えます。ブラウザで無料で使えます。

ソファでの目の高さが42インチ、画面の高さが27インチなら、テレビの下端は床から28.5インチで、画面の中心がちょうど目の高さに来ます。2つの寸法を同じ単位で入れるだけです。ブラウザで無料で使えます。

仕入れ先から届いた4000x3000の商品写真を、商品カードやメールのバナー、アバターに必要な正確な枠に縮小します。切り抜く、収める、引き伸ばすから選べ、画質を保つ方法で仕上げます。使った分だけのお支払いです。

カタログの移行や納品された撮影データなど、ときには数百枚の写真を、1回の処理で同じサイズにそろえます。壊れたファイルや取得できない画像があっても他は止まらず、1枚ごとの結果の一覧が届きます。使った分だけのお支払いです。

元画像を1枚送ると、レイアウトに必要な幅ごとの画像と、そのまま貼れるsrcsetの記述が届きます。スマートフォンがパソコン用の大きなメイン画像を読み込むことはありません。幅は自由に選べ、使った分だけのお支払いです。

写真を正確なピクセル座標で、または1:1や16:9などの比率で中央から自動で切り取ります。枠に押し込んでゆがめるのではなく、被写体はそのまま残ります。切り取る範囲の外には手を加えません。月額契約は不要で、使った分だけのお支払いです。

中央で切り抜くと頭や商品の半分が切れてしまいますが、被写体の位置を見つけてその周りを切り抜くため、1枚の写真を1:1のタイル、4:3の商品写真、16:9のバナーに使えます。使った分だけのお支払いです。

写真と必要な幅・高さを送ると、その寸法どおりの正方形または長方形のサムネイルが届きます。数十件の商品が並ぶ一覧でも、元の大きな画像を読み込まずに軽く表示できます。月額契約は不要で、使った分だけのお支払いです。

JPEGやPNGを、見た目も寸法も形式も変えずに軽くします。五百枚の写真が並ぶギャラリーでも、ページの表示が遅くなる原因になりません。形式ごとに合った方法で圧縮します。月額契約は不要で、使った分だけのお支払いです。

PNGをWebPに変換すると、同じ画像でも容量がおよそ30%軽くなることが多く、透過も保たれます。PNGを1回送るだけでWebPが届き、手作業で書き出し直す必要はありません。月額契約は不要で、使った分だけのお支払いです。

JPEGやPNGを送ると、動画コーデックAV1をもとにしたAVIF形式で届きます。同じ画質ならJPEGより、多くの場合WebPよりも小さくなり、透過も保たれます。月額契約は不要で、使った分だけのお支払いです。

デザイナーから届いたTIFF、古いツールが出したBMP、カメラのJPGを、次に使うシステムが受け付けるJPG、PNG、GIF、BMP、TIFF、WebPのいずれかに変換します。同じ画像が新しい形式で戻ります。月額契約は不要で、使った分だけのお支払いです。

iPhoneのHEIC写真を、Windowsや古いAndroid端末、ウェブのアップロード欄、写真プリントの店でも開ける標準のJPGに変換します。画像の内容はそのままです。失敗した変換は再試行され、料金はかかりません。

SVGを指定したサイズそのままでPNGに描き出すので、2000ピクセルで書き出しても200ピクセルと同じようにくっきりします。元のベクターファイルには手を加えません。月額契約は不要で、使った分だけのお支払いです。

横倒しのスマートフォン写真や逆さまのスキャンを、90度、180度、270度の回転を画素そのものに反映して正しい向きにします。撮影したスマートフォン以外でも正しく表示され、再計算をしないため画質も落ちません。使った分だけのお支払いです。

画像を左右または上下に一度で反転します。左向きの靴の写真は右向きの対の画像になり、逆向きに取り込まれたネガも正しい向きに戻ります。画像のそれ以外の部分は変わりません。

写真やスキャンを白黒に変換します。人の目と同じように緑を赤や青より重く扱うため、肌の色や空、影のコントラストがつぶれません。料金がかかるのは変換に成功したときだけです。

たくさんの写真に同じ仕上がりを与えます。セピアで温かい琥珀色に、ぼかしで顔やノイズをやわらかく、シャープで輪郭をくっきりさせるなど、複数の効果から選べます。失敗した処理は再試行され、料金はかかりません。