lib/styles/palette.js

// source: https://yeun.github.io/open-color/
const palette = {
  gray: [
    '#f8f9fa',
    '#f1f3f5',
    '#e9ecef',
    '#dee2e6',
    '#ced4da',
    '#adb5bd',
    '#868e96',
    '#495057',
    '#343a40',
    '#212529',
  ],
  cyan: [
    '#e3fafc',
    '#c5f6fa',
    '#99e9f2',
    '#66d9e8',
    '#3bc9db',
    '#22b8cf',
    '#15aabf',
    '#1098ad',
    '#0c8599',
    '#0b7285',
  ],
};

export default palette;

---

 

위 색상은 open-color라는 라이브러리에서 추출했습니다. 이 라이브러리를 yarn으로 설치하여 사용할 수도 있습니다. 하지만 이렇게 따로 palette를 만들어 사용하면 open-color에서 제공하는 모든 색상을 불러와 사용하는 것이 아니라 필요한 색상만 불러와서 사용할 수 있고, 자동 import가 좀 더 제대로 작동하기 때문에 더욱 편합니다(open-color 라이브러리를 설치해서 사용하면 open-color 안의 색상들이 자동 import가 되지 않습니다).