#google color palette

色の自動割り当て作業するときに使ってみました google color palette は非常に便利。センスある人なら参考にできるかと思いますが、センスない人なら何も何が得ずにこれを使うだけで楽！

デモ
Palette generator demo(opens new window)

npm

npm i google-palette

github

mpn65 65 色

#ff0029#377eb8#66a61e#984ea3#00d2d5#ff7f00#af8d00#7f80cd#b3e900#c42e60#a65628#f781bf#8dd3c7#bebada#fb8072#80b1d3#fdb462#fccde5#bc80bd#ffed6f#c4eaff#cf8c00#1b9e77#d95f02#e7298a#e6ab02#a6761d#0097ff#00d067#000000#252525#525252#737373#969696#bdbdbd#f43600#4ba93b#5779bb#927acc#97ee3f#bf3947#9f5b00#f48758#8caed6#f2b94f#eff26e#e43872#d9b100#9d7a00#698cff#d9d9d9#00d27e#d06800#009f82#c49200#cbe8ff#fecddf#c27eb6#8cd2ce#c4b8d9#f883b0#a49100#f48800#27d0df#a04a9b

google-palette パッケージ使う

import * as palette from "google-palette";

const colors = palette("mpn65", this.chartStatus.length).map((hex) => {
  return "#" + hex;
});

CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

css画像重ねる効果がほしかったので、cssで画像回転しながらbefore afterで工夫やってみ...

iphone 対応の背景画像フルースクリーン表示

css background image 100% coverがiphoneに効かない対応しました。...

css フルースクリンの背景画像と透けるログイン画面

フルースクリンの背景画像あるいは背景ビデオ、プラス透けるログイン画面を作ってみました...

placeholder text-align プレースホルダーの左寄せ・右寄せ

inputのplaceholder内文字左寄せあるいは右寄せ方法、placeholderにtext-...

margin 上下効かない原因

#google color palette

関連記事