CColorWell
ColorWell を始める
パレット+アクセシビリティツールキット

美しいパレット。検証済みのコントラスト。一つのワークフローで。

ブランドカラーを入力するだけで、調和のとれたパレット、すべてのWCAG判定結果、そしてCSS・Tailwind・Figma用のエクスポートがそのページ内で完結します。

月額 $5〜 — いつでも解約可能

Live — works right here

パレットを生成

ブランドカラーを選択。ColorWell が残りを構築します。

類似色

シェード(明→暗)

エクスポート

デザイントークンをダウンロード

Pro

フルパレットとシェードランプをすぐに使えるファイル形式で保存します。

ファイルをダウンロードするにはProにアップグレードしてください

コントラストチェック

パレットから任意の2色を選択すると、ColorWellがWCAG判定を表示します。

Aa
The quick brown fox jumps over the lazy dog.
2.77
コントラスト比

判定結果: WCAG基準を満たしていません

ブランドパレットに必要なすべて

毎日インターフェースを開発するデザイナーとフロントエンドチームのために構築されました。

調和のとれたパレット

任意のHEXカラーを選択すると、ColorWellが類似色、補色、トライアド、モノクロームのスキームをワンクリックで生成します。

WCAGコントラストを瞬時にチェック

パレット内のすべてのカラーペアに対し、テキスト、大サイズテキスト、UIコンポーネントに対するAA/AAA判定を行います。

CSS、Tailwind、Figmaへのエクスポート

ワンクリックでCSS変数、Tailwind設定、JSONトークン、またはそのまま貼り付け可能なFigmaスタイルへエクスポートできます。

ブランドを維持したままのバリエーション

色相をずらさずに明るさや彩度を調整。ColorWellは知覚色空間(Oklch)内で動作します。

名前付きトークン

"indigo-500"や"slate-700"のような自動命名により、HEXコードではなく人間にとって読みやすいスタイルシートを実現します。

パレットの保存と同期

作成したすべてのパレットは保存可能です。名前やタグを付けて後から呼び出せます。Proプランではクラウド同期に対応。

3 ステップ

単一のブランドカラーから始まり、実用的なスタイルシートで終わる。

1

選択

HEX値を入力するか、カラーピッカーを使用します。

2

生成

ColorWellが調和のとれたパレットを構築し、すべてのコントラストチェックを実行します。

3

エクスポート

CSS、Tailwind、またはFigmaトークンをコピーして、そのままコードベースへ貼り付けます。

シンプルな料金体系

プランを選択し、HEXコードとの格闘を終わらせましょう。

Starter

フリーランスデザイナー向け

$5/月
  • 月100件のパレット保存
  • 無制限のコントラストチェック
  • CSS / Tailwind / JSON エクスポート
  • ブランドガイドラインに沿ったバリエーション
最も人気
Pro

ブランドチーム向け

$15/月
  • 月2000件のパレット保存
  • Figma トークンエクスポート
  • ブランドキット(複数パレットプロジェクト)
  • クラウド同期ライブラリ
  • 優先サポート

よくある質問

インストールは必要ですか?

いいえ。ColorWell はブラウザ上で完全に動作します。同期を選択するまで、カラーデータはデバイスから離れません。

どのカラースペースを使用していますか?

ColorWell は内部的に Oklch を使用しています。視覚的に均等なカラースペース内でバリエーションを生成するため、ブランドカラーを明るくしても色相がずれません。

エクスポートはどのように機能しますか?

CSS 変数、Tailwind 設定ブロック、生 JSON、または Figma 対応スタイルをワンクリックでクリップボードにコピー。コードやデザインツールにそのまま貼り付けられます。

無料トライアルはありますか?

いいえ、これは有料ツールで、月額$5からのプランを提供しています。Starterは月額$5、Proは月額$15で、いつでも解約可能です。

解約方法は?

アカウントページから、またはメールにてご連絡ください。解約すると次回の更新は停止されますが、残りの期間は引き続きご利用いただけます。

HEX コードの手動調整をやめましょう。

パレットを生成し、スタイルシートを提供 — すべてを一か所で。

プランを見る