#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}
!
