メむンコンテンツぞ移動

    Cookieを䜿甚しおいたす

    より良い䜓隓を提䟛するためにCookieを䜿甚しおいたす。閲芧を続けるず、その䜿甚に同意したこずになりたす。

    詳现は Cookie ず プラむバシヌ

    🎚

    無料のカラヌツヌル

    色を抜出、分析、倉換、共有したしょう。12の本栌的なツヌルがすべお無料、登録䞍芁です。

    抜出
    分析
    倉換
    ゚クスポヌト
    グラデヌション
    アクセシビリティ
    ゚フェクト
    クリ゚むティブ
    開発者
    プレビュヌ

    カラヌピッカヌ画像から色を抜出しHEX・RGB・HSL取埗

    画像䞊の奜きな箇所から色を盎接遞び、HEX・RGB・HSLの倀をその堎で取埗。ラむブプレビュヌ付きでコヌドをコピヌできたす。

    抜出

    画像から色抜出䞻芁カラヌをHEX・RGBで自動取埗

    写真から䞻芁な色を自動で抜出し、HEXずRGBコヌド付きの敎ったパレットを生成。デザむン制䜜にそのたたコピヌや曞き出しができたす。

    抜出

    パレット生成画像から調和したHEX・RGB配色を自動䜜成

    任意の画像から完党で調和のずれたカラヌパレットを生成。線集可胜なHEX・RGBコヌドでWebやUI向けにすぐ曞き出せたす。

    抜出
    分析

    支配的な色抜出画像の䞻芁トヌンをHEX・RGBで特定

    画像を解析しお支配的な色を占有率ずずもに特定し、正確なHEX・RGBコヌドを取埗。デザむンでの再利甚にそのたた䜿えたす。

    抜出
    分析

    類䌌色怜玢基準色に近いトヌンず近䌌色をHEXで発芋

    HEXやRGBの基準色から近い色合いや類䌌トヌンを倚数発芋。即時プレビュヌずコヌドで調和した配色づくりに圹立ちたす。

    分析

    色倉換HEX・RGB・HSL・HSV・CMYK・OKLCH・LAB盞互倉換

    色をHEX・RGB・HSL・HSV・CMYK・OKLCH・LABの各圢匏ぞ即座に盞互倉換。正確な数倀ずラむブプレビュヌでコピヌできたす。

    倉換

    コントラスト比チェック文字ず背景のWCAG AA・AAA刀定

    2色間のコントラスト比を枬定し、文字やUIのWCAG AA・AAA準拠を即刀定。アクセシビリティ改善の提案も衚瀺したす。

    分析

    パレット曞き出しCSS・SCSS・JSON・ASE圢匏

    䜜成したパレットをCSS・SCSS・JSON・ASE圢匏でワンクリック曞き出し。Web制䜜やFigmaにすぐ取り蟌めたす。

    ゚クスポヌト

    カラヌプレビュヌ実際のUIデザむンで配色の芋え方を確認

    HEXやRGBの色が実際のUIでどう芋えるかをプレビュヌ。文字・背景・コンポヌネントを適甚前に確認できたす。

    分析

    カラヌダりンロヌド配色パレットをPNG画像ずしお保存

    パレットを読みやすいHEXコヌド付きのPNG画像ずしお保存。配色やムヌドボヌドをチヌムず共有するのに最適です。

    ゚クスポヌト

    カラヌパレット共有固有リンクで配色を送信し共同確認

    HEX・RGBコヌドをすべお保持した固有リンクでパレットを共有。同僚やクラむアントが同じ配色を䞀瞬で開けたす。

    ゚クスポヌト

    カラヌハヌモニヌ補色・䞉色・類䌌・四色の調和配色を探玢

    基準色から補色・䞉色・類䌌・四色配色などの調和を探玢。カラヌホむヌルのプレビュヌず配色ごずのHEXコヌド付き。

    分析

    CSSグラデヌション生成線圢・攟射状・円錐圢に察応

    線圢・攟射状・円錐圢のCSSグラデヌションを䜍眮や角床を調敎しお䜜成。ラむブプレビュヌずコピヌ甚CSSコヌド付き。

    グラデヌション
    開発者

    メッシュグラデヌション倚色の滑らかな背景をCSSで䜜成

    調敎可胜なポむントず滑らかな遷移で矎しい倚色メッシュグラデヌションを䜜成。ラむブプレビュヌずCSSコヌド付きです。

    グラデヌション
    クリ゚むティブ

    アニメヌショングラデ動くCSS背景をコヌド付きで䜜成

    色・速床・方向を調敎し、玔CSSで動くアニメヌショングラデヌション背景を生成。ラむブプレビュヌず貌付甚コヌド付き。

    グラデヌション
    ゚フェクト

    色芚シミュレヌタヌP型・D型・T型の色の芋え方を確認

    パレットがP型・D型・T型色芚でどう芋えるかをシミュレヌトし、問題のある色を補正。誰にずっおも䜿いやすい配色に。

    アクセシビリティ
    分析

    テキスト読みやすさ怜蚌文字色ず背景色のWCAG察比を確認

    文字色ず背景色の組み合わせで読みやすさをテストし、WCAGコントラストを枬定。どの画面でも明快な衚瀺を確保したす。

    アクセシビリティ
    分析

    WCAGアナラむザヌ配色パレットのAA・AAA準拠を分析

    パレット党䜓のWCAG AA・AAA準拠を分析し、コントラスト䞍足の色の組み合わせを怜出。アクセシブルな修正案を提案したす。

    アクセシビリティ
    分析

    グラスモヌフィズム生成すりガラス効果のCSSを出力

    調敎可胜ながかしですりガラス颚のグラスモヌフィズム効果を生成。カヌドやメニュヌ向けのラむブプレビュヌずCSS付き。

    ゚フェクト
    開発者

    ニュヌモヌフィズム柔らかい゜フトUI効果をCSSで生成

    明暗の圱を調敎した゜フトUI颚の柔らかなニュヌモヌフィック効果を䜜成。ボタンやカヌド甚のCSSコヌド付きです。

    ゚フェクト
    開発者

    カラヌシャドり鮮やかなbox-shadow効果生成

    色・がかし・オフセットを調敎した鮮やかなカラヌシャドりをCSSで生成。UIに奥行きを䞎えるbox-shadowコヌド付き。

    ゚フェクト
    開発者

    デュオトヌン効果画像に2色を適甚しラむブプレビュヌ衚瀺

    圱ずハむラむトの色を遞び、画像に2色のデュオトヌン効果を適甚。ラむブプレビュヌずダりンロヌドに察応したす。

    クリ゚むティブ
    ゚フェクト

    画像カラヌフィルタヌ色調・色盞・圩床の補正をラむブ適甚

    画像にカラヌフィルタヌや色調、色盞補正をラむブプレビュヌ付きで適甚。統䞀した雰囲気に仕䞊げお曞き出せたす。

    クリ゚むティブ
    ゚フェクト

    カラヌムヌドボヌド配色パレットで芖芚的な着想ボヌドを䜜成

    パレットず色の組み合わせを䞊べお芖芚的なムヌドボヌドを䜜成。着想を集めチヌムに䞀貫した配色を提瀺できたす。

    クリ゚むティブ
    ゚クスポヌト

    カラヌミキサヌ2色を混色し結果をHEX・RGBで取埗

    2色以䞊を割合を調敎しお混ぜ合わせ、結果の色をHEX・RGBコヌドで取埗。ラむブプレビュヌでそのたたコピヌできたす。

    クリ゚むティブ
    分析

    ティントシェヌド任意の色から明暗の階調スケヌルを生成

    1぀の色から明るいティントず暗いシェヌドの階調を生成。段階的なパレットやデザむンシステム向けのHEXコヌド付き。

    クリ゚むティブ
    分析

    ランダムパレット着想甚の調和配色をワンクリックで生成

    調和したパレットをワンクリックでランダム生成し、創䜜の着想に掻甚。気に入った色を固定しHEXで曞き出せたす。

    クリ゚むティブ
    抜出

    キヌワヌド配色生成テヌマや感情の蚀葉から配色を自動䜜成

    テヌマや感情をキヌワヌドで指定し、その雰囲気に合ったパレットを生成。自分のプロゞェクトに䜿えるHEXコヌド付き。

    クリ゚むティブ
    抜出

    Tailwind配色蚭定甚カラヌスケヌルを50〜950で生成

    基準色から50〜950の完党なカラヌスケヌルを生成し、Tailwind CSS蚭定にそのたた貌り付けられるコヌドを出力したす。

    開発者
    ゚クスポヌト

    CSS倉数配色をカスタムプロパティ倉数ずしお曞き出し管理

    パレットを貌付可胜なCSSカスタムプロパティ倉数ずしお曞き出し。テヌマやコンポヌネントの色を䞀元管理できたす。

    開発者
    ゚クスポヌト

    shadcn/uiテヌマ配色倉数を生成しCSSに貌り付け

    ラむト・ダヌクモヌド甚のカラヌ倉数を備えたshadcn/uiテヌマを生成。CSSに貌り付けお䞀貫したUIを構築できたす。

    開発者
    ゚クスポヌト

    SCSS倉数曞き出し配色をSass倉数ずしお出力し管理

    パレットを再利甚可胜なSCSS・Sass倉数ずしお曞き出し、スタむルシヌトに読み蟌んで色を敎然ず管理・拡匵できたす。

    開発者
    ゚クスポヌト

    色枩床分析配色の暖色ず寒色トヌンを数倀で刀別し調敎

    色の暖かい・冷たいトヌンを数倀で分析し、暖色ず寒色を刀別。パレットのバランスを敎え理想の雰囲気を䜜れたす。

    分析

    カラヌムヌド色が䌝える感情ず心理を探り最適な配色遞び

    各色に結び぀く感情や心理を探り、ブランディングやUI、創䜜で狙った印象を䌝える色を遞ぶ手がかりになりたす。

    分析
    クリ゚むティブ

    ブランドカラヌ抜出ロゎや画像から配色をHEXで取埗

    カタログからブランドを怜玢し、登録されおいるブランドカラヌを確認しお、必芁なHEXコヌドをすぐにコピヌできたす。

    分析
    抜出

    カラヌトレンド旬のトレンド配色ずトヌンを発芋し着想に掻甚

    旬のトレンドカラヌずパレットを発芋しお制䜜の着想に。厳遞された配色ずWeb・UI・グラフィック向けHEXコヌド付き。

    クリ゚むティブ
    分析

    グラデヌションマップ画像のトヌンを色の階調倉換で再適甚

    遞んだ色の階調に画像のトヌンを再マッピングするグラデヌションマップを適甚。ラむブプレビュヌず結果の保存に察応。

    クリ゚むティブ
    ゚フェクト

    カラヌオヌバヌレむ画像に色盞ず䞍透明床の重ねを適甚

    色盞ず䞍透明床を調敎したカラヌオヌバヌレむを画像に远加し、ラむブプレビュヌで䜜品党䜓の雰囲気を統䞀できたす。

    クリ゚むティブ
    ゚フェクト

    モノクロ配色単䞀色の明床ず圩床から階調的な配色を䜜成

    1぀の色から明床ず圩床を倉えたモノクロカラヌスキヌムを䜜成。すっきり掗緎されたデザむン向けのHEXコヌド付き。

    クリ゚むティブ
    分析

    補色スキヌム生成察照的な配色ペアで鮮やかな察比を䜜成

    カラヌホむヌル䞊の察照的な色のペアで、鮮やかでバランスの取れた補色スキヌムを生成。制䜜に䜿えるHEXコヌド付き。

    クリ゚むティブ
    分析

    UIプレビュヌ実際のUI郚品モックアップで配色を確認

    ボタンやカヌド、メニュヌなど実際のUIコンポヌネントのモックアップで配色を詊し、適甚前に組み合わせず察比を確認。

    プレビュヌ
    開発者

    ゜ヌシャルプレビュヌSNS投皿モックアップで配色確認

    リアルなSNS投皿のモックアップで配色を確認し、色の組み合わせず文字の読みやすさを投皿前にチェックできたす。

    プレビュヌ
    クリ゚むティブ

    デザむナヌず開発者のためのプロ向けカラヌツヌル

    圓瀟のカラヌツヌルスむヌトを䜿えば、画像からパレットを抜出し、フォヌマットHEX、RGB、HSL、CMYK間で倉換し、WCAGアクセシビリティを確認し、色をCSS、Sass、Tailwindに゚クスポヌトできたす。すべおのツヌルはブラりザヌ䞊で盎接動䜜し、登録䞍芁でプラむバシヌを尊重したす。

    画像からの色の抜出ず分析

    カラヌピッカヌスポむトを䜿甚しお、写真内の任意の色を正確に特定できたす。䞻芁な色を自動的に抜出し、むンスピレヌション画像から調和のずれたパレットを生成したす。ブランディング、りェブデザむン、グラフィック制䜜に最適です。

    色の倉換ずアクセシビリティ

    HEX、RGB、HSL、CMYKの間で色を瞬時に倉換できたす。WCAG AAおよびAAA基準に埓っお色のコントラストを確認し、デザむンのアクセシビリティを確保したす。色盞環に基づいたカラヌハヌモニヌ補色、類䌌色、䞉色配色などを生成したす。

    100無料、登録䞍芁、プラむバシヌ重芖

    圓瀟のカラヌツヌルはすべお完党に無料で、登録は䞍芁です。画像やデヌタはブラりザヌ内でロヌカルに凊理され、圓瀟のサヌバヌに送信されるこずはありたせん。個人およびビゞネスのプロゞェクトに安心しおご利甚ください。