색깔

부트스트랩은 스타일과 구성 요소를 테마로 하는 광범위한 색상 시스템에서 지원됩니다. 이를 통해 모든 프로젝트에 대해 보다 포괄적인 사용자 지정 및 확장이 가능합니다.

이 페이지에서

테마 색상

모든 색상의 하위 집합을 사용하여 색 구성표를 생성하기 위한 더 작은 색상 팔레트를 생성합니다. 또한 부트스트랩 scss/_variables.scss파일에서 Sass 변수 및 Sass 맵으로도 사용할 수 있습니다.

주요한

중고등 학년

성공

위험

경고

정보

빛

어두운

이 모든 색상은 Sass 맵으로 사용할 수 있습니다 $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

이러한 색상을 수정하는 방법은 Sass 맵 및 루프 문서 를 확인하세요 .

모든 색상

모든 부트스트랩 색상은 파일의 Sass 변수 및 Sass 맵으로 사용할 수 있습니다 scss/_variables.scss. 파일 크기 증가를 방지하기 위해 이러한 각 변수에 대해 텍스트 또는 배경색 클래스를 생성하지 않습니다. 대신 테마 팔레트 에 대해 이러한 색상의 하위 집합을 선택합니다 .

색상을 사용자 정의할 때 명암비를 모니터링해야 합니다. 아래와 같이 기본 색상 각각에 3가지 대비 비율을 추가했습니다. 하나는 견본의 현재 색상, 하나는 흰색, 다른 하나는 검정색입니다.

$블루#0d6efd

$블루-100

$블루-200

$블루-300

$블루-400

$블루-500

$블루-600

$블루-700

$블루-800

$블루-900

$인디고#6610f2

$인디고-100

$인디고-200

$인디고-300

$인디고-400

$indigo-500

$인디고-600

$인디고-700

$인디고-800

$인디고-900

$보라색#6f42c1

$보라색-100

$보라색-200

$보라색-300

$ 보라색-400

$보라색-500

$ 보라색-600

$ 보라색-700

$ 보라색-800

$ 보라색-900

$핑크#d63384

$핑크-100

$핑크-200

$핑크-300

$핑크-400

$핑크-500

$핑크-600

$핑크-700

$핑크-800

$핑크-900

$빨간색#dc3545

$레드-100

$레드-200

$레드-300

$red-400

$레드-500

$레드-600

$레드-700

$레드-800

$레드-900

$오렌지#fd7e14

$오렌지-100

$오렌지-200

$오렌지-300

$오렌지-400

$오렌지-500

$오렌지-600

$ 오렌지-700

$ 오렌지-800

$ 오렌지-900

$옐로우#ffc107

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$yellow-500

$yellow-600

$yellow-700

$yellow-800

$yellow-900

$그린#198754

$그린-100

$그린-200

$그린-300

$그린-400

$그린-500

$그린-600

$그린-700

$그린-800

$그린-900

청록#20c997

$틸-100

$틸-200

$틸-300

$teal-400

$teal-500

$틸-600

$teal-700

$틸-800

$틸-900

$시안#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$회색-500#adb5bd

$회색-100

$회색-200

$회색-300

$회색-400

$회색-500

$회색-600

$회색-700

$회색-800

$회색-900

$블랙#000

$흰색#ffff

Sass에 대한 참고 사항

Sass는 프로그래밍 방식으로 변수를 생성할 수 없으므로 모든 색조 및 음영에 대한 변수를 직접 생성했습니다. 중간점 값(예: $blue-500)을 지정하고 사용자 정의 색상 기능을 사용하여 Sass의 색상 기능을 통해 색상을 색조(밝게) 또는 음영(어둡게) mix()합니다.

를 사용 하는 것은 and와 mix()같지 않습니다. 전자는 지정된 색상을 흰색 또는 검정색과 혼합하고 후자는 각 색상의 밝기 값만 조정합니다. 결과는 이 CodePen 데모에서 볼 수 있듯이 훨씬 더 완전한 색상 모음입니다 .lighten()darken()

우리의 tint-color()및 shade-color()함수는 우리가 생산하는 각 혼합 색상에 대해 단계별 백분율 값을 지정하는 변수 mix()와 함께 사용합니다. 전체 소스 코드 는 및 파일을 $theme-color-interval참조하십시오 .scss/_functions.scssscss/_variables.scss

컬러 사스 맵

Bootstrap의 소스 Sass 파일에는 색상 목록과 해당 16진수 값을 빠르고 쉽게 반복할 수 있는 세 가지 맵이 포함되어 있습니다.

$colors500사용 가능한 모든 기본( ) 색상 을 나열합니다 .
$theme-colors의미상 명명된 모든 테마 색상을 나열합니다(아래 참조).
$grays회색의 모든 색조와 음영을 나열합니다.

에서 scss/_variables.scssBootstrap의 색상 변수와 Sass 맵을 찾을 수 있습니다. 다음은 $colorsSass 맵의 예입니다.

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

맵 내에서 값을 추가, 제거 또는 수정하여 다른 많은 구성요소에서 값이 사용되는 방식을 업데이트합니다. 불행히도 현재로서는 모든 구성 요소가 이 Sass 맵을 사용하는 것은 아닙니다. 향후 업데이트에서는 이를 개선하기 위해 노력할 것입니다. 그때까지 ${color}변수와 이 Sass 맵을 사용할 계획입니다.

예시

Sass에서 이것을 사용하는 방법은 다음과 같습니다.

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

색상 값을 설정 하고 사용하는 데 색상 및 배경 유틸리티 클래스도 사용할 수 있습니다 .colorbackground-color500

유틸리티 생성

v5.1.0에 추가됨

부트스트랩에는 모든 색상 변수에 대한 유틸리티가 포함 color되어 있지 않지만 v5.1.0에 추가된 유틸리티 APIbackground-color 및 확장된 Sass 맵 을 사용하여 직접 생성할 수 있습니다 .

시작하려면 함수, 변수, 믹스인 및 유틸리티를 가져왔는지 확인하세요.
우리의 map-merge-multiple()기능을 사용하여 새 맵에서 여러 Sass 맵을 빠르게 병합하십시오.
이 새로운 결합 맵을 병합하여 {color}-{level}클래스 이름이 있는 유틸리티를 확장하십시오.

.text-purple-500다음 은 위의 단계를 사용하여 텍스트 색상 유틸리티(예: )를 생성하는 예입니다 .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

이것은 모든 색상과 레벨에 대한 새로운 .text-{color}-{level}유틸리티를 생성합니다. 다른 유틸리티 및 속성에 대해서도 동일한 작업을 수행할 수 있습니다.