RGBの補色を返す関数を書いた

書き捨てのコードなので、適当に参考にしてください。
実装はTypeScriptですが、同じノリで他の言語もできると思ってます。

wikipedia
補色同士の色の組み合わせは、互いの色を引き立て合う相乗効果があり、これは「補色調和」といわれる。
しかし、純色など、明度が同じ補色同士を組合せた場合は、ハレーションを引き起こして、目がチカチカしてしまう

// FFFFFF, 00FF1E などの文字列を受け取り、その補色を設定して返却する
getComplementaryColor(rgbStr: string): string {
    const R = rgbStr.substr(0, 2).toLowerCase()
    const G = rgbStr.substr(2, 2).toLowerCase()
    const B = rgbStr.substr(4, 2).toLowerCase()

    const r = ('00' + (255 - parseInt(R, 16)).toString(16)).slice(-2)
    const g = ('00' + (255 - parseInt(G, 16)).toString(16)).slice(-2)
    const b = ('00' + (255 - parseInt(B, 16)).toString(16)).slice(-2)

    return r + g + b
}

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。

@marshmallow88

エンジニアです。フロントエンド成分多め。 JavaScript / TypeScript / Vue.js / React.js アイコンはきらうるメーカー謹製 https://picrew.me/image_maker/196709/

株式会社insight

主にWebアプリケーション全般の開発を行っております

https://www.insight-inc.biz/

写真からマインクラフトのドット絵に変換するwebアプリを作った話 by kult

scpコマンド by chihiro

従来のアーキテクチャから演算能力や堅牢性が向上した『Armv9』とは PR Arm

@4028fhw

2021-09-01 01:17

RGBに分けなくても大丈夫です。

function getComplementaryColor(hexColorCode) {
  return (0xffffff - parseInt(hexColorCode.slice(0, 6), 16))
          .toString(16).padStart(6, '0');
}

console.log(getComplementaryColor('000000')); // ffffff
console.log(getComplementaryColor('123456')); // edcba9
console.log(getComplementaryColor('fedcba')); // 012345

あなたもコメントしてみませんか :)

ユーザー登録

すでにアカウントを持っている方はログイン