브랜드 색상 간 10단계 그래디언트 만들기

1. 두 브랜드 색상 감시하기

맥락 없이 매력적인 끝점을 선택하기보다는 이미 설정된 두 색상으로 시작하세요. 색상 A는 브랜드의 기본 색상일 수 있고, 색상 B는 지원 또는 캠페인 색상일 수 있습니다. 각각이 현재 나타나는 위치와 전달하는 내용을 기록하세요.

브랜드 가이드라인이 이전 PDF에만 존재하고 함께 제공되는 텍스트로 작업해야 하는 경우, PDF to Word 변환기로 편집 가능한 문서를 만들 수 있습니다. 변환된 값은 여전히 원본 브랜드 파일과 비교해야 합니다. 변환이 색상 코드가 최신이거나 올바른지 확인하지 않기 때문입니다.

한 끝점이 아직 승인되지 않았으면, 색상 팔레트 생성기를 사용하여 혼합 연습을 시작하기 전에 조합을 탐색하세요. 아직 논의 중인 두 색상 간의 상세한 그래디언트를 만들지 마세요.

이 감시는 일반적인 문제를 방지합니다: 오래된 로고 색상, 승인되지 않은 캠페인 값 또는 압축된 스크린샷에서 복사한 코드에서 광택 있는 그래디언트를 만드는 것입니다.

2. 유효한 HEX 끝점 준비하기

색상 믹서는 HEX 값을 끝점으로 사용합니다. 각 6자리 HEX 값은 해시 기호로 시작하고 빨강, 녹색 및 파랑을 나타내는 쌍을 포함합니다. 예를 들어, #2563EB는 강한 파란색이고 #E11D48는 생생한 빨강-분홍색입니다.

신뢰할 수 있는 브랜드 파일, 디자인 시스템 라이브러리 또는 소스 코드에서 값을 복사하세요. 공식 코드가 있을 때 로고 스크린샷 샘플링을 피하세요. 이미지 압축, 디스플레이 설정 및 색상 관리는 스크린샷에서 수집하는 값을 약간 변경할 수 있습니다.

각 끝점을 흰색, 밝은 회색, 숯검정 및 검은색 배경에 배치하세요. 이는 아직 완전한 그래디언트를 테스트하지 않지만 일반적인 컨텍스트에서 끝점이 시각적으로 약해지는지 여부를 나타냅니다.

brand-start 및 brand-end와 같은 임시 작업 이름을 끝점에 지정하세요. "왼쪽"과 "오른쪽"이라고 이름을 지정하지 마세요. 나중에 그래디언트 방향이 바뀔 수 있기 때문입니다. 색상은 그래디언트가 세로, 대각선 또는 방사형이 되더라도 자신의 정체성을 유지해야 합니다.

3. 10단계 그래디언트 생성하기

색상 믹서를 열고, 색상 A와 B를 입력한 다음 단계 수를 10으로 설정하세요. 결과를 생성하고 모든 표시된 값을 원래 순서대로 작업 문서에 복사하세요.

정지점의 이름을 지정하기 전에 완전한 전환을 스트립으로 봅시다. 연속적인 것처럼 느껴지나요, 아니면 한 영역이 갑자기 점프하는 것 같은가요? 중간이 둔탁해지나요? 한 끝점이 다른 것보다 시각적으로 훨씬 더 강한가요?

수학적으로 균등한 시퀀스가 항상 시각적으로 균등해 보이지는 않습니다. 밝은 노란색은 혼합 백분율이 동등하게 분배되어도 어두운 파란색보다 더 밝고 활기차 보일 수 있습니다. 지각된 밝기, 색상 및 채도는 모두 시퀀스가 어떻게 느껴지는지에 영향을 줍니다.

다음 예제는 두 샘플 끝점 사이에 10개 값이 어떻게 문서화될 수 있는지 보여줍니다. 당신의 결과는 선택한 색상과 도구 또는 디자인 응용 프로그램에서 사용하는 보간 방법에 따라 달라집니다.

4. 중점 및 전환 경로 검사하기

중점은 두 브랜드 색상이 어떻게 상호 작용하는지 나타내므로 특별한 주의가 필요합니다. 파란색과 빨강-분홍색이 혼합되면, 중심이 보라색을 통해 이동할 수 있습니다. 다른 조합은 덜 예측 가능한 결과를 만들 수 있습니다. 예를 들어, 보색은 음울한 중간 값을 생성할 수 있습니다.

중점을 큰 고립된 색상 표본으로만 판단하지 마세요. 인접한 정지점 사이에 배치한 다음 실제 구성 요소에서 테스트하세요. 혼자 흥미롭지 않아 보이는 색상은 차트나 삽화에서 필요한 정확한 전환을 제공할 수 있습니다.

생성된 중점을 디자인 소프트웨어의 간단한 50% 오버레이와 비교하세요. 값은 다를 수 있습니다. 응용 프로그램이 색상을 다른 공간에서 보간하거나 투명도를 다르게 적용할 수 있기 때문입니다. 최종 프로덕션 환경과 일치하는 워크플로우를 사용하세요.

중점을 승인됨, 조정 가능 또는 거부됨으로 표시하세요. 음울해지면, 먼저 해당 음울한 영역이 유용한지 결정하세요. 음울한 중심은 생생한 끝점 사이에 시각적 휴식을 제공할 수 있습니다. 디자인을 약하게 하면, 공식 브랜드 색상을 변경하기보다는 의도적인 중간 정지점을 추가하는 것을 고려하세요.

5. 약하거나 흐린 정지점 제거하기

생성된 10개의 정지점이 모두 영구 디자인 토큰이 되어야 한다는 의미는 아닙니다. 이 연습은 10개 값을 사용하여 전환을 보이게 합니다. 최종 시스템은 반복되는 문제를 해결하는 색상만 유지해야 합니다.

모든 정지점을 그 앞과 뒤의 것과 비교하세요. 두 값이 정상 구성 요소 크기에서 구별하기 거의 불가능하면, 별도의 이름이 필요하지 않을 수 있습니다. 중간 값이 너무 많은 채도를 잃으면, 음울한 지원 색상으로 작동하는지 아니면 제거해야 하는지 결정하세요.

회색으로 시퀀스를 테스트하세요. 이는 색상의 산만함 없이 밝기 진행을 나타냅니다. 여러 인접한 색상이 같은 회색으로 무너지면, 차트나 데이터 시각화에 충분한 톤 분리를 제공하지 못할 수 있습니다.

모든 비정상적인 전환을 "수리"하지 마세요. 두 브랜드 색상을 혼합하는 목적은 그들이 어떻게 관련되어 있는지 발견하는 것입니다. 때때로 올바른 결론은 그들이 하나의 연속적인 그래디언트를 형성하지 않아야 한다는 것입니다. 그들은 그 사이에 중립적인 전환으로 별도의 단색으로 더 잘 작동할 수 있습니다.

6. 예측 가능한 명명 시스템 만들기

정지점이 검토되면, 안정적인 이름을 할당하세요. 가장 간단한 시스템은 blend-01에서 blend-10까지의 위치에 따라 색상을 번호 매깁니다. 이는 시퀀스를 유지하지만 각 값을 사용해야 하는 방법을 설명하지 않습니다.

더 강력한 시스템은 원시 값을 의미론적 역할에서 분리합니다. 원시 토큰은 완전한 색상 시�ence을 기록합니다. 의미론적 토큰은 선택된 색상을 캠페인 배경, 차트 시작, 차트 중점 또는 삽화 악센트와 같은 책임에 연결합니다.

:root {
  --blend-01: #2563eb;
  --blend-02: #3a5bd9;
  --blend-03: #4f53c7;
  --blend-04: #644cb5;
  --blend-05: #7944a3;
  --blend-06: #8d3c90;
  --blend-07: #a2347e;
  --blend-08: #b72d6c;
  --blend-09: #cc255a;
  --blend-10: #e11d48;

  --campaign-gradient-start: var(--blend-01);
  --campaign-gradient-middle: var(--blend-06);
  --campaign-gradient-end: var(--blend-10);
}

많은 토큰 목록이나 사용 레이블을 유지하는 경우, 알파벳 순서 도구는 참조 목록을 정렬하고 우발적인 중복 줄을 제거할 수 있습니다. 번호 매긴 그래디언트 시퀀스 자체를 알파벳순으로 정렬하지 마세요. 시각적 순서를 그대로 유지해야 하기 때문입니다.

7. 유용한 디자인 역할 할당하기

그래디언트 시퀀스는 정지점을 일관되게 재사용할 수 있을 때 가치 있게 됩니다. 모든 색상에 인위적인 용도를 찾는 것이 아니라 프로젝트에 따라 역할을 할당하세요.

끝점은 기본 브랜드 색상으로 유지될 수 있습니다. 중간 값은 차트 스케일, 삽화 시리즈, 진행 표시기 또는 캠페인 시스템을 지원할 수 있습니다. 부드러운 중점은 큰 장식 영역으로 작동할 수 있고, 더 강한 정지점은 중요한 통계를 강조할 수 있습니다.

시퀀스가 구별 가능하고 의미 있게 유지되지 않는 한, 순서가 정해진 데이터를 나타내기 위해 연속 브랜드 그래디언트를 사용하지 마세요. 사용자는 값 간의 차이를 이해할 수 있어야 합니다. 그래디언트가 장식적일 때는 더 많은 자유가 있습니다. 정보를 전달할 때는 명확성이 우선입니다.

8. 그래디언트 방향 및 타이포그래피 테스트하기

방향이 바뀌면 같은 색상이 다른 인상을 만들 수 있습니다. 수평 그래디언트는 페이지 전체의 움직임을 시사할 수 있습니다. 수직 그래디언트는 깊이를 만들 수 있습니다. 대각선 방향은 종종 더 활기차 느껴지고, 방사형 그래디언트는 중심점을 향해 시선을 끌어줍니다.

Figma의 공식 가이드 그래디언트를 채우기 또는 획으로 사용는 선형, 방사형, 각도 및 다이아몬드 그래디언트 유형을 설명합니다. 하나 이상의 유형을 테스트하되, 가장 시각적으로 극적인 옵션이 아니라 구성을 지원하는 버전을 선택하세요.

실제 제목, 단락 및 버튼을 그래디언트에 추가하세요. 흰색, 숯검정 및 기타 승인된 텍스트 색상을 여러 위치에서 테스트하세요. 텍스트 색상은 색상 A 위에서 읽을 수 있지만 배경이 색상 B에 가까워지면 실패할 수 있습니다.

장식적인 텍스트 실험은 Fancy Text 생성기로 탐색할 수 있습니다. 하지만 유니코드 스타일 텍스트는 중요한 제목, 네비게이션 또는 접근 가능한 웹 콘텐츠에서 적절한 타이포그래피를 대체해서는 안 됩니다. 제한된 창의적 탐색에만 사용하고 최종 메시지를 읽을 수 있게 유지하세요.

단일 텍스트 색상이 전체 그래디언트에서 작동할 수 없을 때, 단어마다 텍스트 색상을 계속 변경하지 마세요. 단색 패널을 추가하거나, 콘텐츠를 재배치하거나, 필수 텍스트 없는 영역에 그래디언트를 예약하세요.

9. CSS에서 그래디언트 구현하기

방향과 정지점이 승인되면, CSS를 사용하여 웹 버전을 만드세요. MDN은 linear-gradient()를 직선을 따라 두 가지 이상의 색상 사이의 점진적 전환을 생성하는 CSS 함수로 정의합니다.

.brand-gradient {
  background-color: #2563eb;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #4f53c7 22%,
    #7944a3 44%,
    #a2347e 66%,
    #cc255a 84%,
    #e11d48 100%
  );
}

단색 background-color는 폴백을 제공합니다. 선택된 그래디언트 정지점은 모든 10개 값을 자동으로 추가하는 것이 아니라 의도적으로 배치됩니다. CSS에서 더 적은 정지점을 사용하는 것은 10단계 탐색을 무효화하지 않습니다. 검토 과정이 최종 효과에 필요한 값을 식별했다는 것을 보여줍니다.

CSS-Tricks는 방향, 색상 정지점, 방사형 그래디언트, 반복 그래디언트 및 관련 구현 패턴을 포함하는 CSS 그래디언트에 대한 완전한 가이드를 제공합니다.

프로젝트와 관련된 브라우저 및 장치에서 구현을 테스트하세요. 라이브 CSS 결과를 승인된 디자인 파일과 비교하세요. 디스플레이 설정, 색상 프로필, 브라우저 렌더링 및 내보내기 방법 때문에 약간의 차이가 보일 수 있습니다.

10. 시스템 테스트, 문서화 및 내보내기

그래디언트는 한 모니터에서만 매력적인 것처럼 보일 때 완성되지 않습니다. 크고 작은 크기, 텍스트 있음 없음, 밝고 어두운 주변 표면, 낮은 품질의 디스플레이에서 테스트하세요.

보이는 밴딩, 약한 대비, 예상치 못한 음울한 영역 및 끝점과 무관해 보이는 중간 색상을 확인하세요. 또한 소셜 플랫폼과 프레젠테이션 소프트웨어가 라이브 CSS 배경과 다르게 압축하거나 처리할 수 있기 때문에 정적 내보낸 이미지를 테스트하세요.

두 끝점, 생성된 모든 10개 정지점, 유지된 프로덕션 정지점, 의도된 방향, 승인된 용도 및 금지된 용도가 포함된 1페이지 그래디언트 사양을 만드세요. 실제 타이포그래피 및 구성 요소 콘텐츠가 있는 그래디언트를 보여주는 예시를 추가하세요.

각 사양 페이지가 JPG로 준비되면, JPG to PDF 변환기는 이를 하나의 순서가 정해진 문서로 결합할 수 있습니다. 내보낸 PDF를 열고 색상을 원본 디자인과 비교한 후 클라이언트 또는 개발 팀과 공유하세요.