ウェブ配色ツール Ver2.0　produced by フォルトゥナ

1色を作れば自動的に配色を作るツールです。説明はページ下部に。スマホ・タブレット対応の新しいバージョン「ウェブ配色ツール Ver3」があります。

リンクの色も読みやすく

ロゴが読めないと、サイトを覚えてもらえない

地味なテクスチャは配色を和らげる

背景色が暗い場合は、色相差は控えめに

読めない配色に一切の価値なし

本文テキストに意味不明な装飾を施さないこと

中明度の背景色は出来るだけ避ける

赤と緑の高彩度色は要注意色

色使いが苦手な人は、色相差を0°に近づける

緩やかなグラデーションが配色を助ける

背景色は薄い方が長文は読みやすい

赤と緑の組み合わせを避ける

悩んだときには色の面積を減らす

広めに余白を取るだけで解決出来ることは多い

食は万里を超える

配色ツール　バージョン2.0

基本的な使い方

左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。

カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。

色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。

この配色ツールについて

この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。

取材・執筆等のお申し込み

このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥナのサイトで承っております。使いやすい配色や説得力のある配色など聞きたい内容に合わせて内容をカスタマイズしますので、気軽にお問い合わせください。

またSEO業者やウェブ制作会社からの宣伝・勧誘については、すべて返信いたしませんのでご了承ください。

このページのトップに戻る▲

Copyright © Web & Color Design Fortuna All Rights Reserved.

配色の方向

全体の背景

ロゴの背景

色相差
配色一覧表1
テーマカラー #654321  
全体の背景 #654321  
メニュー #49341F  
ロゴ #555555  
配色一覧表2
本文見出し1 #996128  
本文見出し2 #654D36  
サイドバー見出し #A39382  
サイドバー背景 #E0D8D1  

まずしい木こりの男が、大きな森の近くにこやをもって、おかみさんとふたりのこどもとでくらしていました。ふたりのこどものうち、男の子がヘンゼル、女の子がグレーテルといいました。しがなくくらして、ろくろく歯にあたるたべものを、これまでもたべずに来たのですが、ある年、国じゅうが大ききんで、それこそ、日日のパンが口にはいらなくなりました。木こりは、晩、寝床にはいったものの、こののち、どうしてくらすかかんがえると、心配で心配で、ごろごろ寝がえりばかりして、ためいきまじりに、おかみさんに話しかけました。

基本的な使い方

画面右上のカラーピッカーを操作することで、配色が自動的に出来上がります。またその下にある操作パネルを調整することで、多少のカスタマイズが出来るようになっています。

操作の説明

基本色
カラーピッカーで選んだ色が表示されます。またここに色を16進数6桁でRGB値（例：#CC0000）を入れることも可能です。
ロゴの文字
初期値はフォルトゥナになっておりますが、ここに文字を入れることで、表示する名前を変えることができます。
ロゴの色
16進数6桁でRGB値（例：#CC0000）を入力することで、ロゴの色を変えることが出来ます。既にロゴの色が決まっている場合にお使いください。
配色の方向
レイアウト領域内に色を付けるかどうかの選択ができます。「明るい」を選ぶ背景が白くなり、全体的に明るい配色となります。「暗い」を選ぶと全体に色が付くようになります。どちらかというと欧米向きのサイトの配色が出来上がるような気もします。
全体の背景
レイアウト領域の外側の背景色をありにするか、白にするかを選択出来ます。
ロゴの背景
「配色の方向」を「暗い」にした場合、背景色によってロゴが見えなくなります。そのような場合に、ロゴの背景部分を白にすることが出来ます。
色相差
このツールは基本的に同系色相でまとめるようになっていますが、このスライダーで使う色相に幅を持たせることが出来ます。あまり大きくしすぎるとおかしな配色になるので、控えめな利用をおすすめします。
メインビジュアルの変更
画像の右下の方にある矢印のボタンを押すことで、メインビジュアルを変更することができます。作りたいイメージに近い画像を選ぶようにしてください。
配色一覧の表示
ロゴの部分（初期はフォルトゥナ）を押すことで、出来上がった配色の一覧を表示することができます。コピー＆ペーストができますので、保存したい時などにご利用ください。
サンプルテキスト

右下にある文章は、文字が読みやすいかどうかを確認するためのブロックです。コントラストが一定以上に低くなって、読みにくいのではないかという場合には、大きな赤い×印が出ます。主に中明度の背景色を使ったときに出てきますので、そのような色は使わないのが無難です。

なお、このコントラストの計算にはWCAG2.0やJIS X8341-3:2010で使われているコントラスト比が4.5以下の時に警告出るように設定しています。ただし4.5以上の場合でも読みにくい組み合わせはありますのでご注意ください。

使い方のコツや注意事項

配色がどうしても上手くいかない方は？

このツールを提供しているフォルトゥナでは、ウェブ配色診断サービスを行っています。どうしても配色が上手くいかないので改善点を知りたい場合や、配色の知識がなくどこを修正してよいかわからない場合など、配色の問題を指摘して、具体的にどのように変更すればよいかをアドバイスしています。

このツールに関するご意見・お問い合わせなど

このツールは大阪のホームページ制作事務所 フォルトゥナが提供しております。フォルトゥナではツールを使ってもどうしても配色がよくならないという方のためのデザインアドバイスなども行っています。ご質問やバグの発見、取材、書籍等への掲載のお問い合わせや業務の依頼などは、フォルトゥナのお問い合わせページよりお願いいたします。

更新の履歴

このページのトップへ

フォルトゥナ

グローバル変数

global varsvalues
%{BID}1
%{UID}
%{CID}
%{EID}
%{RID}
%{RVID}
%{UTID}
%{CMID}
%{TBID}
%{KEYWORD}
%{TAG}
%{FIELD}
%{DATE}
%{START}1000-01-01 00:00:00
%{END}9999-12-31 23:59:59
%{PAGE}1
%{ORDER}
%{QUERY}
%{QOL}?
%{ADMIN}
%{IS_ADMIN}0
%{ADMIN_PATH}
%{ADMIN_PATH_MID}
%{MID}
%{MODULE_ID}
%{MODULE_NAME}
%{STYLEGUIDE_PAGE}acms-admin
%{GETTEXT_TYPE}user
%{BCD}
%{UCD}
%{CCD}
%{ECD}
%{BLOG_NAME}フォルトゥナ
%{USER_NAME}
%{CATEGORY_NAME}
%{ENTRY_TITLE}
%{RULE_NAME}
%{CONFIG_SET_ID}
%{CONFIG_SET_NAME}
%{RCID}
%{PCID}
%{RCCD}
%{PCCD}
%{ROOT_CATEGORY_NAME}
%{PARENT_CATEGORY_NAME}
%{RBID}1
%{PBID}
%{RBCD}
%{PBCD}
%{ROOT_BLOG_NAME}フォルトゥナ
%{PARENT_BLOG_NAME}
%{ALIAD_ID}
%{ALIAS_ID}
%{ALIAS_DOMAIN}
%{ALIAS_CODE}
%{ALIAS_NAME}
%{CHARSET}UTF-8
%{META_KEYWORDS}
%{META_DESCRIPTION}フォルトゥナは東大阪市のホームページ制作・コンサルティングを得意とするデザイン事務所です。利益や売り上げへのこだわりはもちろん、会社の未来や理想の姿をお客さまと一緒に考え、ともに歩んでいけるパートナーとして、御社のビジネスのお手伝いをします。
%{YAHOO_API_KEY}
%{NOW_DATE}2021-09-17
%{NOW_TIME}12:45:30
%{BLOG_THEME_COLOR}
%{BLOG_THEME_CONTRAST_COLOR}#ffffff
%{VERSION}2.11.39
%{SNAME}sid
%{SID}
%{SESSION_USER_ID}
%{SESSION_BLOG_ID}
%{MAX_PUBLISHES}15
%{ROOT_TPL}/themes/base/color_scheme_genelator2/index.html
%{ROOT_TPL_NAME}index
%{ROOT_DIR}/
%{DOCUMENT_ROOT}/
%{THEMES_DIR}/themes/
%{JS_DIR}/js/
%{JS_LIB_DIR}/js/library/
%{JS_LIB_JQUERY_DIR}/js/library/jquery/
%{JS_LIB_JQUERY_DIR_VERSION}3.4.1
%{LOGIN_SEGMENT}login
%{SYSTEM_THEMES_DIR}/themes/system/
%{CURRENT_THEMES_DIR}/themes/base/
%{ARCHIVES_DIR}/archives/
%{MEDIA_ARCHIVES_DIR}/media/
%{MEDIA_STORAGE_DIR}storage/
%{BID_ARCHIVES_DIR}/archives/001/
%{YM_ARCHIVES_DIR}/archives/001/202109/
%{ARCHIVES_DIR_TEMP}/archives/temp/
%{ARCHIVES_CACHE_SERVER}
%{HTTP_THEMES_DIR}https://www.color-fortuna.com/themes/
%{HTTP_CURRENT_THEMES_DIR}https://www.color-fortuna.com/themes/base/
%{HTTP_ARCHIVES_DIR}https://www.color-fortuna.com/archives/
%{HTTP_MEDIA_ARCHIVES_DIR}https://www.color-fortuna.com/media/
%{HTTP_ARCHIVES_DIR_TEMP}https://www.color-fortuna.com/archives/temp/
%{HTTP_BID_ARCHIVES_DIR}https://www.color-fortuna.com/archives/001/
%{HTTP_YM_ARCHIVES_DIR}https://www.color-fortuna.com/archives/001/202109/
%{HTTP_REQUEST_URL}https://www.color-fortuna.com/color_scheme_genelator2/
%{IMAGES_DIR}/themes/system/images/
%{SCRIPT_ROOT}/
%{REWRITE_OFFSET}/
%{HTTP_ROOT}https://www.color-fortuna.com/
%{DOMAIN}www.color-fortuna.com
%{DOMAIN_ROOT}www.color-fortuna.com
%{HTTP_HOST}www.color-fortuna.com
%{BASE_URL}http://www.color-fortuna.com/
%{ADMIN_BASE_URL}https://www.color-fortuna.com/
%{BLOG_URL}https://www.color-fortuna.com/
%{ROOT_BLOG_URL}https://www.color-fortuna.com/
%{PARENT_BLOG_URL}
%{CATEGORY_URL}https://www.color-fortuna.com/
%{ROOT_CATEGORY_URL}https://www.color-fortuna.com/
%{PARENT_CATEGORY_URL}https://www.color-fortuna.com/
%{CANONICAL_URL}https://www.color-fortuna.com/
%{ENTRY_URL}https://www.color-fortuna.com/
%{PERMALINK}https://www.color-fortuna.com/
%{INHERLINK}https://www.color-fortuna.com/
%{CURRENT_URL}https://www.color-fortuna.com/color_scheme_genelator2/
%{HOME_URL}https://www.color-fortuna.com/
%{BASE_ACMS_PATH}/
%{ACMS_PATH_BASE}/
%{SCRIPT_DIR}/home/kyunitan/color-fortuna.com/public_html/
%{CURRENT_ROOT}/color_scheme_genelator2
%{REQUEST_PATH}/color_scheme_genelator2
%{REQUEST_DIRNAME}/color_scheme_genelator2
%{MODULE}
%{VALID_ID_REGEX}@^[a-zA-Z0-9_-]+$@
%{REGEX_VALID_ID}@^[a-zA-Z0-9_-]+$@
%{REGEX_VALID_PASSWD}@^[!-~]+$@
%{CATEGORY_EXISTS}1
%{CATEGORY_LEVEL}0
%{VIEW}index
%{UA}CCBot/2.0 (https://commoncrawl.org/faq/)
%{UA_GROUP}PC
%{REMOTE_ADDR}3.236.212.116
%{MAINTENANCE_MODE}
%{PROTOCOL}https
%{BLOG_CODE}
%{USER_CODE}
%{CATEGORY_CODE}
%{ENTRY_CODE}
%{BLOG_ID}1
%{USER_ID}
%{CATEGORY_ID}
%{ENTRY_ID}
%{SUID}
%{SBID}
%{SESSION_USER_AUTH}
%{SESSION_USER_NAME}
%{SESSION_USER_CODE}
%{SESSION_USER_MAIL}
%{SEARCH_ENGINE_KEYWORD}
%{MAIL_MAGAZINE_FROM}info@example.com
%{MAIL_TRACKBACK_FROM}
%{MAIL_COMMENT_FROM}info@example.com
%{MAIL_REMIND_FROM}info@example.com
%{MAIL_SUBSCRIBE_FROM}info@example.com
%{MAIL_SUBSCRIBE_ADMIN_FROM}info@example.com
%{PHP_FILE_MAX_SIZE}30M
%{PHP_POST_MAX_SIZE}30M
%{MEDIA_LIBRARY}on
%{IS_DEVELOPMENT}off
%{IS_TRIAL}off
%{TRIAL_COUNT_DOWN}0
%{IS_SUBSCRIPTION}off
%{SUBSCRIPTION_PLAN}
%{UNLICENSED_REASON}
%{SUBSCRIPTION_PAYMENT}
%{ACTIVATION_ENDPOINT}https://mypage.a-blogcms.jp/api/activation
%{GOOGLE_API_KEY}AIzaSyCi3Sa43FLFfPOy3PdWqV0JAEZY2PKZrWE
%{PREVIEW_DEFAULT_DEVICE}iPhone 6/7/8
%{APPROVAL_PREVIEW_DEFAULT_DEVICE}iPhone 6/7/8
%{TIMEMACHINE_PREVIEW_DEFAULT_DEVICE}PC
%{d}17
%{D}Fri
%{j}17
%{l}Friday
%{N}5
%{S}th
%{w}5
%{z}259
%{W}37
%{F}September
%{m}09
%{M}Sep
%{n}9
%{t}30
%{L}0
%{o}2021
%{Y}2021
%{y}21
%{a}pm
%{A}PM
%{B}198
%{g}12
%{G}12
%{h}12
%{H}12
%{i}45
%{s}30
%{u}000000
%{e}Asia/Tokyo
%{I}0
%{O}+0900
%{P}+09:00
%{T}JST
%{Z}32400
%{c}2021-09-17T12:45:30+09:00
%{r}Fri, 17 Sep 2021 12:45:30 +0900
%{U}1631850330

モジュール処理時間

moduleidentifierrun time

テンプレート

template

メモリー

keyvalue
memory_limit200M
memory_get_usage7.66 MB
memory_get_peak_usage7.68 MB