デザイン・カラー

HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。

OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。

文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。

基準の色から補色・三色配色・類似色の規則で調和のとれたパレットを組み立てます。

目標の比率に合うもう一辺を求め、その寸法に当てはまる標準規格を並べます。

複数枚重ねたボックスシャドウとテキストシャドウをプレビューしながら組み立て、CSSを出力します。

停止点をドラッグして線形・円形・扇形のグラデーションを作り、sRGBまたはOKLCHのCSSを出力します。

名前を付けた領域でグリッドを目で見ながら組み、grid-templateのCSSを出力します。

色ひとつから50〜950のランプを作り、それを反転させたダークのランプを組にして、対応するトークン同士のコントラストを保ちます。

スクリーンショットをスマホ・タブレット・ノートPC・ブラウザの枠にはめ、背景と影を添えます。

実例の上でflexの各プロパティを切り替え、出来上がるCSSと各プロパティが何を変えたのかを表示します。

2つのビューポート幅のあいだでサイズがなめらかに変わるclamp()の式を計算します。

TTF・OTFとWOFFをブラウザ内で相互に変換して@font-face規則まで書き出します（WOFF2はBrotliが要るため扱わず、デスクトップの道具を案内します）。

システムフォントスタックから見出し用と本文用の組み合わせを提案し、韓国語か英語のサンプルで見比べてからCSSを渡します。和文の見本はありません。

TrueTypeフォントを実際に使う字だけに削ぎ落としてWOFFにも包む、日本語ウェブフォントで数MBと数十KBを分ける作業です。

任意の色にいちばん近いTailwindパレットの値を探し、見た目の色差も示します。

タイトル・サブタイトル・ブランド名とロゴをテンプレートに載せて1200×630の共有画像を作り、一緒に入れるメタタグも書き出します。

SVGをプレビューの隣で編集しながら、viewBoxと拡大、変形、各パスコマンド、継承された塗り、無駄なバイト、そして<img>やデータURIやインラインで何が壊れるかを解説します。

色ひとつから見た目の間隔が均等な50〜950の明度スケールを作り、そのままデザイントークンに使えます。

ストライプ・ドット・格子・ノイズなど、継ぎ目のないSVGパターンを色と大きさを決めて作ります。

角ごとに値を変え、2値記法のスクワークル的な形まで作ってCSSを出力します。

サンプルにぼかし・明度・彩度・色相・ドロップシャドウのフィルタを重ねて試し、CSSを出力します。

スタイルシートから色・余白・角丸・書体の値を拾い出し、カスタムプロパティの一式を提案します。

動くプレビューを見ながらcubic-bezierやスプリング曲線を調整し、CSSのタイミング関数を出力します。

フォントファイルを開いて、ブロック別の収録グリフ・ハングル音節数・ウェイト・可変軸・埋め込み許可・ライセンス名レコードを表示します。

ICCや用紙プロファイルを使わない基本式でRGBをCMYKに変換し、4色印刷でくすむ高彩度の色に印を付けます。

パスデータを絶対・相対コマンドで書き換え、移動・拡大・回転・向きの反転を加え、バウンディングボックスとプレビューを表示します。

SVGをCSS背景用のデータURIに符号化し、必要な文字だけをエスケープして短く保ちます。

基準サイズと比率から文字と余白のモジュラースケールを作り、CSSかトークンとして書き出します。