css 색상을 디자인을 할 때 여러 가지 색상 및 한가지 색상에 대한 색깔 조절을 할 필요가 있다.

색상을 일일히 조절하기보단 이미 완성되어있는 색상과 색상조절을 이용하면 편할 수 있다.

이 때 유용한 라이브러리를 기록해두고자 한다.

open-color

$ npm install open-color

open-color 라이브러리는 다양한 색상을 모아둔 라이브러리이다.
원하고자하는 색상을 변수 컨벤션으로 가져와 사용할 수 있다.

styled-component

styled-component에서 사용할 때에 다음과 같이 사용할 수 있다.

import oc from "open-color";
import styled from "styled-components";

const AuthContainer = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: ${oc.gray[4]};

  display: flex;
  align-items: center;
  justify-content: center;

  .link-auth {
    color: ${oc.gray[6]};

    &:hover {
      color: ${oc.gray[5]};
    }
  }
`;

sass,scss,css

sass,scss,css에서는 다음과 같이 사용할 수 있다.

sass , scss

$oc-(color)-(number)

css

--oc-(color)-(number)