LFColors

無料カラーパレット生成ツール

ワンクリックで調和の取れたカラーパレットを作成し、CSS、SCSS、Tailwind、Bootstrap、PDFに書き出せます。無料・登録不要・利用制限なし。

ベースの色を選ぶ

オンラインカラーパレット生成ツール

数クリックで調和の取れたパレットを作成

LFColorsは、Web制作やデザインで調和の取れたカラーパレットを素早く作りたいという、シンプルな願いから生まれました。開発者やデザイナーの方も、色に興味のある方も、手間をかけずに相性のよい色の組み合わせを探せます。

制作に役立つ、わかりやすい機能

LFColorsはシンプルな操作画面に、色のロック、各種形式(CSS、SCSS、Tailwind、Bootstrap)での書き出し、パレットの保存、URLでの共有など、実務で役立つ機能を備えています。用途に応じて、1つのパレットに2〜10色を設定できます。生成したらカラーパレットを開いて、細かく調整し、書き出してください。

色彩理論に基づく生成アルゴリズム

Web制作のたびに統一感のある配色を探すのに時間がかかることから、このツールの着想を得ました。LFColorsは基本的な色彩理論を取り入れながら、無料でシンプルに使えます。モノクロマティック、類似色、補色、トライアドなど、制作の目的に合わせたアルゴリズムを用意しています。

「自動」モードは、色相・彩度・明度の関係をもとにバランスの取れたパレットを作成します。最初の案を作るときや、プロトタイプ、アイデア探しに便利です。

各配色のページでは、実例と適した用途を紹介しています:モノクロマティックのカラーパレット, 類似色のカラーパレット, 補色のカラーパレット, トライアドのカラーパレット。すべての配色もご覧いただけます。

LFColorsが無料なのはなぜ?

日々の制作に使う道具は、誰もが使えるものであるべきだと考えているからです。LFColorsはLudovic Frankのサービス群の一つです。ほかにもLFQR(QRコード生成)、LFNY(URL短縮)、LFMDP(パスワード生成)、LFSocial(SNS画像作成)、LFMaps(無料の地図埋め込み)などを提供しています。

LFColorsには、シンプルで役に立ち、使う人を中心に考える私たちのWeb制作の姿勢が表れています。独自のWebサービスの開発やコンサルティングが必要な際は、お気軽にご相談ください。

よくある質問

カラーパレットとは何ですか?
カラーパレットは、互いに調和するように選んだ色の組み合わせです。Webやグラフィックのデザインに統一感を与え、見る人の視線を誘導し、ブランドの個性を強めます。LFColorsは色彩理論をもとに、通常2〜10色の、見やすくバランスのよい組み合わせを提案します。
カラーパレット生成ツールは本当に無料ですか?
はい。LFColorsは完全無料で、登録、生成回数の制限、透かしはありません。CSS、SCSS、Tailwind、Bootstrap、JSON、PDF、16進数リストなど、すべての書き出し形式を利用できます。パレットはサーバーではなく、ご自身のブラウザーに保存されます。
LFColorsの使い方を教えてください。
「ランダムな色を生成」をクリックするとすぐに始められます。「ベースの色を選ぶ」から好みの色で始めることもできます。その後、スペースキーか「再生成」ボタンで新しい組み合わせを探し、気に入った色をロックして、色数を調整し、書き出してください。
どの配色を選べばよいですか?
落ち着いた画面にはモノクロマティックや類似色が向いています。ボタンや操作のきっかけを目立たせたいときは補色を選びます。迷ったときは分裂補色がおすすめです。色がぶつかりにくく、適度なコントラストが得られます。自動モードなら、これらのルールを使って組み合わせを提案します。
HEX、RGB、HSLの違いは何ですか?
HEX(#3E7CB1)は、CSSやデザインツールでよく使う16進数表記です。RGBは同じ色を赤・緑・青の成分で表し、RGBAによる透明度の指定に便利です。HSLは色相・彩度・明度で表し、1色から濃淡を作るときにわかりやすい形式です。LFColorsは3つの形式すべてに変換し、書き出せます。
作ったパレットは弱視の方にも見やすいですか?
美しい配色が必ずしも見やすいとは限りません。WCAGでは、本文と背景のコントラスト比を4.5:1以上、大きな見出しでは3:1以上としています。文字や背景に使える十分に暗い色と明るい色をパレットに含め、色だけで情報を伝えないようにしてください。