Jira Confluence Bitbucket の 配色パターン (ルックアンドフィール)

あんまり需要ないと思いますが、自分が困ったので、メモがてら。
開発環境と本番環境で色分けたいなー、なんて時にご利用下さい。
※素人配色＆考えです。

Jira

Server 7.3.8

基本的な考え方

1. ベースの色を決める
   　　このページでは「緑」をベースとした場合で記載していきます。

2. パレットでRGBだけを調整して、ベースとした色味が一番強いものをチョイス
   　　真ん中あたりのカラフルな縦のヤツで調整しました。（頭の悪い説明）
   　　RGBが均等のものはそのままにしておきます。

3. たぶんそのままだと目が痛い配色のはずなので、パレット右下の「B」の値を調整。
   　　良い感じに暗くできたらOK

Jiraのパレット

実際の配色

2色（明：#289928、暗：#1A661A）を中心に考える。
※単にこれ以上の複雑な配色パターンを考えられないだけとも言う

本体

対象	色	補足
ヘッダーの背景色	#1A661A	暗
ヘッダーの強調背景色	#289928	明
ヘッダーのセパレータの色	#2d522d	（実は未だにどこの色か分からん）
ヘッダーの文字の色	#ffffff	そのまま
ヘッダーの強調文字の色	#f0f0f0	そのまま
メニュー項目の強調背景色	#289928	明
メニュー項目の文字の色	#ffffff	そのまま
ボタンの背景色	#289928	明
ボタンの文字の色	#ffffff	そのまま
アクティブ リンクの色	#2C802C	アクティブリンクなのでリンクより少し明るめ
見出しの色	#292929	そのまま
リンクの色	#1c4d1c	リンクなのでなるべく見やすい落ち着いた色で
※なんとなく明るさ的には以下な順序
明＞暗＞アクティブリンク＞リンク

ガジェット

対象	色	補足
色 1 (既定)	#289928	追加した色
色 2	#3b73af	元の規定の色。「色2」自体は変更前に緑系を担当。

Confluence

Server 6.1.4

基本的な考え方

考え方は、Jiraと変わらない。
Jiraで配色決めていたらそれをそのままコピペすれば行ける。

実際の配色

対象	色	補足
トップ バー	#1A661A	暗
トップ バーの文字	#FFFFFF	そのまま
ヘッダー ボタンの背景	#289928	明
ヘッダー ボタンの文字	#FFFFFF	そのまま
トップ バー メニュー選択時の背景	#289928	明
トップ バー メニュー選択時の文字	#FFFFFF	そのまま
トップ バー メニュー項目の文字	#2C802C	Jiraのアクティブリンクに同じ
メニュー項目選択時の背景	#289928	明
メニュー項目選択時の文字	#FFFFFF	そのまま
検索フィールド背景	rgba(0, 0, 0, 0.2)	そのまま
検索フィールド テキスト	#FFFFFF	そのまま
ページ メニュー選択時の背景	#289928	明
ページ メニュー項目の文字	#333333	そのまま
見出しの文字	#333333	そのまま
スペース名の文字	#999999	そのまま
リンク	#2C802C	Jiraのアクティブリンクに同じ
枠線と区切り線	#CCCCCC	そのまま
タブ ナビゲーションの背景	#289928	明
タブ ナビゲーションの文字	#FFFFFF	そのまま
タブ ナビゲーションの背景の強調色	#289928	明
タブ ナビゲーションの文字の強調色	#FFFFFF	そのまま

Bitbucket

Server

基本的な考え方

2色しか選べない。でも1色で統一しても割と行ける。
Jiraで配色決めていたらそれをそのままコピペすれば行ける。
（結局、暗の方を選ぶだけだった）

実際の配色

対象	色	補足
Header color	#1a661a	暗
Accent color	#1a661a	暗

最後に

この記事は、「この考え方良いよ！」とかではなく、「こう考えました」って記事です。
センスねー！って思われる方は、是非「俺はこうやったぜ！」ってのあげてくださいー。
（Atlassian製品関連の日本語記事少ないので困る。）

以上