최고의 컬러 스킴 【Open Color】

이 내용에 대해

이 내용은 Open Color 소개와 일본어 번역입니다.

Open Color란?

Open Color는 오픈 소스 최적화된 컬러 구성표로,
여기에 있는 색을 선택하는 것으로 보기 쉬운 배색을 할 수 있습니다.
Open Color

사용법・도입

사이트에 접속하여 색을 사용하고 싶은 색을 선택해 사용하는 것만으로도 좋지만, npm가 제공되고 있습니다.

터미널

npm install open-color

Sass (SCSS)에서 사용하는 경우

Sass(SCSS)

@import 'path/open-color';
p{
  color: $oc-gray-7;
}
a{
  color: $oc-indigo-8;
}

CSS에서 사용하는 경우

CSS

@import 'path/open-color.css';
p{
  color: var(--oc-gray-7);
}
a{
  color: var(--oc-indigo-8);
}

색상 목록

아래에 나열된 것은 Open Color 사이트와 동일합니다.

그레이계 (Gray)

gray-0: #f8f9fa gray-1: #f1f3f5 gray-2: #e9ecef gray-3: #dee2e6gray-4: #ced4da gray-5: #adb5bd gray-6: #868e96gray-7: #495057 gray-8: #343a40 gray-9: #212529

레드계 (Red)

red-0: #fff5f5 red-1: #ffe3e3 red-2: #ffc9c9 red-3: #ffa8a8red-4: #ff8787 red-5: #ff6b6b red-6: #fa5252red-7: #f03e3e red-8: #e03131 red-9: #c92a2a

핑크 계열 (Pink)

pink-0: #fff0f6 pink-1: #ffdeeb pink-2: #fcc2d7 pink-3: #faa2c1pink-4: #f783ac pink-5: #f06595 pink-6: #e64980pink-7: #d6336c pink-8: #c2255c pink-9: #a61e4d

포도계 (Grape)

grape-0: #f8f0fc grape-1: #f3d9fa grape-2: #eebefa grape-3: #e599f7grape-4: #da77f2 grape-5: #cc5de8 grape-6: #be4bdbgrape-7: #ae3ec9 grape-8: #9c36b5 grape-9: #862e9c

보라색 (Violet)

violet-0: #f3f0ff violet-1: #e5dbff violet-2: #d0bfff violet-3: #b197fcviolet-4: #9775fa violet-5: #845ef7 violet-6: #7950f2violet-7: #7048e8 violet-8: #6741d9 violet-9: #5f3dc4

남색계 (Indigo)

indigo-0: #edf2ff indigo-1: #dbe4ff indigo-2: #bac8ff indigo-3: #91a7ffindigo-4: #748ffc indigo-5: #5c7cfa indigo-6: #4c6ef5indigo-7: #4263eb indigo-8: #3b5bdb indigo-9: #364fc7

청계 (Blue)

blue-0: #e7f5ff blue-1: #d0ebff blue-2: #a5d8ff blue-3: #74c0fcblue-4: #4dabf7 blue-5: #339af0 blue-6: #228be6blue-7: #1c7ed6 blue-8: #1971c2 blue-9: #1864ab

시안계 (Cyan)

cyan-0: #e3fafc cyan-1: #c5f6fa cyan-2: #99e9f2 cyan-3: #66d9e8cyan-4: #3bc9db cyan-5: #22b8cf cyan-6: #15aabfcyan-7: #1098ad cyan-8: #0c8599 cyan-9: #0b7285

청록계 (Teal)

teal-0: #e6fcf5 teal-1: #c3fae8 teal-2: #96f2d7 teal-3: #63e6beteal-4: #38d9a9 teal-5: #20c997 teal-6: #12b886teal-7: #0ca678 teal-8: #099268 teal-9: #087f5b

녹색계 (Green)

green-0: #ebfbee green-1: #d3f9d8 green-2: #b2f2bb green-3: #8ce99agreen-4: #69db7c green-5: #51cf66 green-6: #40c057green-7: #37b24d green-8: #2f9e44 green-9: #2b8a3e

황록계 (Lime)

lime-0: #f4fce3 lime-1: #e9fac8 lime-2: #d8f5a2 lime-3: #c0eb75lime-4: #a9e34b lime-5: #94d82d lime-6: #82c91elime-7: #74b816 lime-8: #66a80f lime-9: #5c940d

황색계 (Yellow)

yellow-0: #fff9db yellow-1: #fff3bf yellow-2: #ffec99 yellow-3: #ffe066yellow-4: #ffd43b yellow-5: #fcc419 yellow-6: #fab005yellow-7: #f59f00 yellow-8: #f08c00 yellow-9: #e67700

오렌지계 (Orange)

orange-0: #fff4e6 orange-1: #ffe8cc orange-2: #ffd8a8 orange-3: #ffc078orange-4: #ffa94d orange-5: #ff922b orange-6: #fd7e14orange-7: #f76707 orange-8: #e8590c orange-9: #d9480f