#app.section
.row
h1 Material Color Picker
//- カラーパレット
.col.s12.l7#color-palette
.row
-
// 彩度
var saturation = [
{ value: "50", label: "lighten-5" },
{ value: "100", label: "lighten-4" },
{ value: "200", label: "lighten-3" },
{ value: "300", label: "lighten-2" },
{ value: "400", label: "lighten-1" },
{ value: "500" },
{ value: "600", label: "darken-1" },
{ value: "700", label: "darken-2" },
{ value: "800", label: "darken-3" },
{ value: "900", label: "darken-4" },
{ value: "A100", label: "accent-1" },
{ value: "A200", label: "accent-2" },
{ value: "A400", label: "accent-3" },
{ value: "A700", label: "accent-4" }
];
// 色相
var hue = [
{ name: "red", colors: ["ffebee", "ffcdd2", "ef9a9a", "e57373", "ef5350", "f44336", "e53935", "d32f2f", "c62828", "b71c1c", "ff8a80", "ff5252", "ff1744", "d50000"] },
{ name: "pink", colors: ["fce4ec", "f8bbd0", "f48fb1", "f06292", "ec407a", "e91e63", "d81b60", "c2185b", "ad1457", "880e4f", "ff80ab", "ff4081", "f50057", "c51162"] },
{ name: "purple", colors: ["f3e5f5", "e1bee7", "ce93d8", "ba68c8", "ab47bc", "9c27b0", "8e24aa", "7b1fa2", "6a1b9a", "4a148c", "ea80fc", "e040fb", "d500f9", "aa00ff"] },
{ name: "deep purple", colors: ["ede7f6", "d1c4e9", "b39ddb", "9575cd", "7e57c2", "673ab7", "5e35b1", "512da8", "4527a0", "311b92", "b388ff", "7c4dff", "651fff", "6200ea"] },
{ name: "indigo", colors: ["e8eaf6", "c5cae9", "9fa8da", "7986cb", "5c6bc0", "3f51b5", "3949ab", "303f9f", "283593", "1a237e", "8c9eff", "536dfe", "3d5afe", "304ffe"] },
{ name: "blue", colors: ["e3f2fd", "bbdefb", "90caf9", "64b5f6", "42a5f5", "2196f3", "1e88e5", "1976d2", "1565c0", "0d47a1", "82b1ff", "448aff", "2979ff", "2962ff"] },
{ name: "light blue", colors: ["e1f5fe", "b3e5fc", "81d4fa", "4fc3f7", "29b6f6", "03a9f4", "039be5", "0288d1", "0277bd", "01579b", "80d8ff", "40c4ff", "00b0ff", "0091ea"] },
{ name: "cyan", colors: ["e0f7fa", "b2ebf2", "80deea", "4dd0e1", "26c6da", "00bcd4", "00acc1", "0097a7", "00838f", "006064", "84ffff", "18ffff", "00e5ff", "00b8d4"] },
{ name: "teal", colors: ["e0f2f1", "b2dfdb", "80cbc4", "4db6ac", "26a69a", "009688", "00897b", "00796b", "00695c", "004d40", "a7ffeb", "64ffda", "1de9b6", "00bfa5"] },
{ name: "green", colors: ["e8f5e9", "c8e6c9", "a5d6a7", "81c784", "66bb6a", "4caf50", "43a047", "388e3c", "2e7d32", "1b5e20", "b9f6ca", "69f0ae", "00e676", "00c853"] },
{ name: "light green", colors: ["f1f8e9", "dcedc8", "c5e1a5", "aed581", "9ccc65", "8bc34a", "7cb342", "689f38", "558b2f", "33691e", "ccff90", "b2ff59", "76ff03", "64dd17"] },
{ name: "lime", colors: ["f9fbe7", "f0f4c3", "e6ee9c", "dce775", "d4e157", "cddc39", "c0ca33", "afb42b", "9e9d24", "827717", "f4ff81", "eeff41", "c6ff00", "aeea00"] },
{ name: "yellow", colors: ["fffde7", "fff9c4", "fff59d", "fff176", "ffee58", "ffeb3b", "fdd835", "fbc02d", "f9a825", "f57f17", "ffff8d", "ffff00", "ffea00", "ffd600"] },
{ name: "amber", colors: ["fff8e1", "ffecb3", "ffe082", "ffd54f", "ffca28", "ffc107", "ffb300", "ffa000", "ff8f00", "ff6f00", "ffe57f", "ffd740", "ffc400", "ffab00"] },
{ name: "orange", colors: ["fff3e0", "ffe0b2", "ffcc80", "ffb74d", "ffa726", "ff9800", "fb8c00", "f57c00", "ef6c00", "e65100", "ffd180", "ffab40", "ff9100", "ff6d00"] },
{ name: "deep orange", colors: ["fbe9e7", "ffccbc", "ffab91", "ff8a65", "ff7043", "ff5722", "f4511e", "e64a19", "d84315", "bf360c", "ff9e80", "ff6e40", "ff3d00", "dd2c00"] },
{ name: "brown", colors: ["efebe9", "d7ccc8", "bcaaa4", "a1887f", "8d6e63", "795548", "6d4c41", "5d4037", "4e342e", "3e2723"] },
{ name: "grey", colors: ["fafafa", "f5f5f5", "eeeeee", "e0e0e0", "bdbdbd", "9e9e9e", "757575", "616161", "424242", "212121"] },
{ name: "blue grey", colors: ["eceff1", "cfd8dc", "b0bec5", "90a4ae", "78909c", "607d8b", "546e7a", "455a64", "37474f", "263238"] }
];
table
thead.hide-on-small-only
tr
th
each item in saturation
th.center(:class=`{ active: '${item.value}' == color.value }`) !{item.value.replace("A", "A<br>")}
tbody
each hueItem in hue
tr
//- th.white-text(class=`${hueItem.name}`) #{hueItem.name}
//- 色名
th(:class=`{ active: '${hueItem.name}' == color.hue }`) #{hueItem.name}
//- カラーパレット
each hex, index in hueItem.colors
-
var materializeHueName = hueItem.name.replace(" ", "-"); // スペースをハイフンに置き換える(ex. "deep purple"→"deep-purple")
var materializeClass = [materializeHueName]; // materializeの色を設定するクラス名
if (saturation[index].label) {
materializeClass.push(saturation[index].label);
}
td(
class=`${materializeHueName} ${saturation[index].label}`,
:class=`{
active: hex == '${hex}',
'same-hue': color.hue == '${hueItem.name}',
'same-tone': color.value == '${saturation[index].value}'}`, data-hex=`${hex}`
)
- var changeColorFunc = `changeColor('#${hex}', '${hueItem.name}', '${saturation[index].value}', '${materializeClass}', $event)`;
a(@click.prevent=`${changeColorFunc}`, @mousedown.prevent=`${changeColorFunc}`)
//- 選択した色の詳細
.col.s12.l5#color-info(v-bind:class="{ darken: luminance < 140 }")
.row.z-depth-1.color-info__background(v-bind:class="color.materializeClass.join(' ')")
.col.s12
h3 {{ color.hue }} / {{ color.value }}
form.col.s12
-
// 出力のラベルと書式
var output = [
{ label: "HEX", value: "#{{ hex }}" },
{ label: "RGB", value: "rgb({{ rgb[0] }}, {{ rgb[1] }}, {{ rgb[2] }})" },
{ label: "CSS Background Color", value: "background-color: rgba({{ rgb[0] }}, {{ rgb[1] }}, {{ rgb[2] }}, 1);" },
{ label: "Swift UIColor RGB", value: "UIColor(red: {{ rgbDouble[0] }}, green: {{ rgbDouble[1] }}, blue: {{ rgbDouble[2] }}, alpha: 1.0)" },
{ label: "Materialize css（background color）", value: "{{ color.materializeClass.join(' ') }}" },
{ label: "Materialize css（text color）", value: "{{ color.materializeTextClass.join(' ') }}" }
]
each item, index in output
.row
.col.s12
label #{item.label}
.col.s12
//- .waves-effect をつけると、スマホでリンクの位置をタップしてページスクロールすると変な挙動になるのでつけない
a.copy-code.btn-flat.right
i.material-icons content_copy
.code #{item.value}
@use postcss-simple-vars;
@use postcss-custom-media;
@use postcss-simple-vars;
@use postcss-nested;
@custom-media --phone (max-width: 600px);
@custom-media --tablet (max-width: 992px);
@custom-media --desktop (max-width: 1200px);
@custom-media --large-desktop (min-width: 1201px);
body {
margin-left: 20px;
margin-right: 20px;
}
@media (--phone) {
body {
margin-left: 0;
margin-right: 0;
}
}
h1 {
font-size: 2.5rem;
}
/* カラーパレット*/
#color-palette{
table {
border-collapse: separate;
/* border-spacing: 1px; */
thead {
th {
vertical-align: bottom;
line-height: 1.4;
color: #bdbdbd;
font-size: 0.9rem;
padding-top: 0;
padding-bottom: 5px;
border-radius: 0;
/* 選択中 */
&.active {
color: #424242;
background-color: #cfd8dc;
}
}
}
tbody {
height: 300px;
overflow: auto;
th {
width: 80px;
color: #424242;
line-height: 1.2;
text-transform: capitalize;
border-radius: 0;
/* 選択中 */
&.active {
/* color: #fff; */
background-color: #cfd8dc;
}
}
td {
$border: solid 2px rgba(255, 255, 255, .7);
$active-border: solid 5px rgba(255, 255, 255, .9);
position: relative;
width: 6.5%;
border-radius: 0;
border-right: solid 1px rgba(255, 255, 255, .3);
border-bottom: solid 1px rgba(255, 255, 255, .3);
/* 同じ色相 */
&.same-hue {
border-top: $border;
border-bottom: $border;
}
/* 同じ階調 */
&.same-tone {
border-left: $border;
border-right: $border;
}
/* 選択中 */
&.active {
border: $active-border;
transition: border-width 0.2s ease-out;
a {
cursor: default;
}
}
/* ボタン */
a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
}
}
}
}
/* 選択した色の情報 */
#color-info {
position: sticky;
top: 0;
h3 {
color: rgba(0, 0, 0, .87);
text-transform: capitalize;
}
/* 背景色 */
.color-info__background {
transition: background-color 0.2s ease-out;
}
/* 色のコードをコピーするボタン */
.copy-code {
height: auto; /* 上書き */
text-transform: none;
padding-left: 0;
padding-right: 0;
}
form {
padding-top: 10px;
margin-bottom: 10px;
background-color: rgba(255, 255, 255, .8);
border-radius: 2px;
}
.code {
line-height: 1.4;
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-right: 30px; /* ボタンの分を空ける */
}
/* 背景色が暗いとき */
&.darken {
h3 {
color: rgba(255, 255, 255, .87);
}
}
}
// デフォルト値
const initialStore = {
hex: "f44336", // 16進コード
color: {
hue: "red", // 色相
value: "500", // 明度
materializeClass: ["red"], // materializeのクラス名
materializeTextClass: ["red-text"] // materializeのテキストカラー
}
};
const app = new Vue({
el: '#app',
data: initialStore,
methods: {
/**
* 色を変更する
*
* @param hex {string} カラーコード
* @param hueName {string} 色名（ex. "red", "green"）
* @param colorValue {string} 明度(ex. "50", "100", "A100")
* materializeClass {[string]} クラス名の配列
* event {Event} イベント
*/
changeColor: function(hex, hueName, colorValue, materializeClass, event) {
this.hex = hex.replace(/^#/, '');
this.color.hue = hueName;
this.color.value = colorValue;
this.color.materializeClass = materializeClass.split(',');
let textClass = [];
materializeClass.split(',').forEach(function (value, index) {
if (index === 0) {
textClass.push(`${value}-text`); // 色相
}
else if (index === 1) {
textClass.push(`text-${value}`); // 階調
}
});
this.color.materializeTextClass = textClass;
// if (event.type === 'click') {
// // 詳細にスクロールする
// scrollToInfo();
// }
}
},
computed: {
/**
* hexからrgbに変換する
*
* @return {[number]} RGBの配列
*/
rgb: function () {
const hex = this.hex;
return [
parseInt((hex).substring(0, 2), 16),
parseInt((hex).substring(2, 4), 16),
parseInt((hex).substring(4, 6), 16),
];
},
/**
* hexからrgbに変換する（255を1とする）
*
* @return {[number]} RGBの配列
*/
rgbPer: function () {
return this.rgb.map((value) => (value / 255));
},
/**
* hexからrgbに変換する（255を1.00とする）
*
* @return {[number]} RGBの配列
*/
rgbDouble: function () {
return this.rgbPer.map((value) => value.toFixed(3));
},
/**
* 輝度
*
* @return {number} 輝度（0〜255）
*/
luminance: function () {
const rgb = this.rgb;
const r = 0.298912;
const g = 0.586611;
const b = 0.114478;
return Math.floor(r * rgb[0] + g * rgb[1] + b * rgb[2]);
}
}
});
//----------------------------------
// 詳細の位置にスクロール
//----------------------------------
const $window = $(window);
const $info = $('#color-info');
/**
* 詳細の位置にスクロール
*
*/
function scrollToInfo() {
const to = $info.offset().top;
// window scroll don't work for iPhone/iPad
if (Math.abs($window.scrollTop() - to) > 150) {
$("html, body")
.dequeue()
.stop()
.animate({ scrollTop: to }, 250, 'swing');
}
}
//----------------------------------
// コードのボタンをクリックしてコピー
//----------------------------------
const clipboard = new Clipboard('.copy-code', {
text: function(trigger) {
const $this = $(trigger);
return $this.next().text();
}
});
clipboard.on('success', (e) => {
// console.info('Action:', e.action);
// console.info('Text:', e.text);
// console.info('Trigger:', e.trigger);
Materialize.Toast.removeAll();
Materialize.toast(`<span class="green-text text-lighten-1">Copied!</span> ${e.text}`, 5000);
});
clipboard.on('error', (e) => {
Materialize.Toast.removeAll();
Materialize.toast('<span class="red-text text-lighten-2">Copy to fail...</span>', 5000);
});
// // debug
// const $debug = $('<div></div>');
// $debug.css({
// position: 'fixed',
// top: 5,
// right: 5,
// backgroundColor: 'rgba(255, 255, 255, 0.6)',
// border: 'solid 1px #f00'
// });
// $('body').append($debug);
// TODO 逆引きがしたい
Also see: Tab Triggers