색상에 대한 추가 정보
PictorX에서 시도해 볼 수 있는 빛과 인식부터 RGB, CMYK, HSL, 16진수, 색상환, 그라데이션, 대비까지 색상에 대해 자세히 알아보세요.
빛과 눈 그리고 두 가지의 혼합
색상은 물체에 코팅된 코팅이 아닙니다. 그것은 빛과 파장을 빨간색, 노란색 또는 청록색으로 바꾸는 뇌입니다. 스크린은 빛을 추가합니다(첨가 혼합): 빨간색, 녹색, 파란색 램프가 흰색을 향해 결합됩니다. 인쇄 및 페인트에서 빛을 뺍니다(감산 혼합): 잉크는 파장을 필터링하여 검은색 방향으로 혼합합니다. 이것이 바로 모니터의 네온이 종이의 동일한 작업과 거의 일치하지 않는 이유입니다.
RGB: 화면에서 색상을 계산하는 방법
휴대폰이나 노트북의 픽셀은 세 개의 작은 빛입니다. 각 채널은 일반적으로 0~255(8비트)로 저장됩니다. (0, 0, 0)은 검은색, (255, 255, 255)는 흰색, (255, 0, 0)은 완전한 빨간색입니다. 16진수는 웹에 대해 작성된 것과 동일한 트리플입니다. #FF0000은 빨간색이고 #000000은 검정색입니다. 디자이너들은 디스플레이가 실제로 방출하는 RGB이기 때문에 여전히 RGB로 이야기합니다.
CMYK: 인쇄물이 다르게 보이는 이유
프린터는 청록색, 자홍색, 노란색 및 검정색(K) 잉크를 사용합니다. 빛을 발산할 수 없고 흡수만 하기 때문에 화면의 RGB 영역은 대부분의 CMYK 인쇄기보다 넓습니다. 모니터의 포화된 전기 파란색은 종종 종이에서는 흐려집니다. 인쇄 색상과 사용할 용지에 대한 증명을 약속하기 전에 CMYK로 변환하세요. PictorX는 선택한 색상의 CMYK 숫자를 표시하여 간격을 확인할 수 있습니다. 이는 언론 프로필을 대체할 수 없습니다.
HSL 및 HSV: 디자이너의 손잡이
색조는 무지개 위의 위치(0~360°)입니다. 채도는 회색과 얼마나 순수한지를 나타냅니다. 밝기(HSL)는 흰색 또는 검정색에 얼마나 가까운지를 나타냅니다. 값/밝기(HSV)는 색상이 끝까지 생생하게 유지되면서 검정색에 얼마나 가까운지를 나타냅니다. 디자이너들은 HSL과 HSV를 좋아합니다. "조금 더 어둡고 같은 주황색"은 하나의 슬라이더이지 세 개의 RGB 숫자 중 추측이 아니기 때문입니다.
16진수 및 명명된 CSS 색상
16진수(#RRGGBB, 때로는 #RGB 또는 #RRGGBBAA)는 웹에서 RGB를 나타내는 약어입니다. CSS는 또한 고정된 16진수 값에 매핑되는 명명된 색상(coral, steelblue, rebeccappurple)을 제공합니다. 이름은 스케치에 편리합니다. hex(또는 최신 CSS 색상 기능)는 브랜드가 일치해야 할 때 제공되는 것입니다.
색상환과 관계
색상환은 색상을 원으로 배열합니다. 고전적인 관계: 보색은 반대쪽에 위치하며(파란색과 주황색) 대비가 강합니다. 유사한 색상은 이웃하고 연관되어 있다고 느낍니다. 삼원색은 3도 간격으로 떨어져 있으며 생동감을 유지합니다. 분할 보완은 색상에 반대쪽 옆에 있는 2개를 더한 것입니다. 이는 충돌이 적은 대비입니다. 단색은 다양한 밝기의 하나의 색상입니다. PictorX의 팔레트 생성기는 현재 보색, 유사, 단색을 유지합니다. 주어진 도구가 모든 조화를 제공하지 못하는 경우에도 휠은 여전히 클래식 세트의 나머지 부분을 설명합니다.
그라디언트: 색상 사이의 경로
그라디언트는 경로를 따라 혼합되는 것입니다. 선형은 특정 방향으로 이동합니다. 방사형은 중심에서 자랍니다. 색상은 해당 경로를 따라 위치에 정확한 색상을 고정하는 것을 중지합니다. 더 많은 정지를 의미하는 것은 자동으로 더 많은 맛을 느끼는 것이 아니라 더 많은 제어를 의미합니다. CSS에서 선형 그라데이션과 방사형 그라데이션은 동일한 아이디어입니다. PictorX의 그라디언트 편집기를 사용하면 중지점을 드래그하고 CSS, HEX, RGB, HSL, HSV 또는 CMYK를 복사할 수 있습니다.
대비, 접근성, 따뜻함과 시원함
대비는 두 색상의 밝기(및 색상)가 어느 정도 차이가 나는지를 나타냅니다. WCAG는 텍스트를 계속 읽을 수 있도록 충분한 대비를 요구합니다. 일반 텍스트의 경우 약 4.5:1, 레벨 AA의 큰 텍스트의 경우 3:1입니다. 그것은 스타일이 아니라 바닥입니다. 따뜻한 색상(빨간색, 주황색, 노란색)이 더 가깝게 느껴집니다. 차가운 색상(파란색, 녹색, 보라색)이 사라집니다. 유형과 UI에 대비를 사용하세요. 기분에는 따뜻하고 시원한 것을 사용하십시오.
PictorX의 색상 도구
색상환은 색상을 선택하고 조화를 읽는 데 사용됩니다. 그라디언트 편집기는 블렌드 및 CSS용입니다. 팔레트 생성기는 세트를 만들고 잠그고 섞으며 사진에서 색상을 가져올 수 있습니다. 색상 전송은 브라우저에서 한 사진의 스타일을 다른 사진의 팔레트로 변경합니다. 색상 효과를 사용하면 사진에 색조와 다른 느낌을 더할 수 있습니다. 이 중 어느 것도 프레스나 분광 광도계를 대체할 수 없습니다. 이는 사진에서 색상이 어떻게 동작하는지 확인하는 가장 빠른 방법입니다.
자주 묻는 질문
RGB와 CMYK의 차이점은 무엇입니까?
RGB는 화면의 추가 조명입니다(보통 채널당 0~255). CMYK는 종이에 감산 잉크입니다. 범위가 다르기 때문에 화면 색상이 정확하게 인쇄되지 않는 경우가 많습니다.
색상환에서 보완이란 무엇을 의미하나요?
보완물은 서로 반대편에 위치합니다. 함께 그들은 강하게 대조됩니다. PictorX의 팔레트 생성기는 시작 색상에서 보색 세트를 만들 수 있습니다.
디자이너가 RGB 대신 HSL을 사용하는 이유는 무엇입니까?
색조, 채도, 밝기는 우리가 색상에 대해 말하는 방식과 일치합니다. 순진한 RGB 조정처럼 실수로 갈색을 혼합하지 않고 HSL에서 주황색을 어둡게 할 수 있습니다.
WCAG에는 어느 정도의 대비가 필요합니까?
AA의 경우 일반 텍스트의 경우 약 4.5:1, 큰 텍스트의 경우 약 3:1입니다. 샘플 견본만으로는 유형을 확인하지 않고 실제 배경에서 유형을 확인하세요.
관련 도구
컬러 휠
대화형 휠에서 색상을 선택하고, 보색, 유사, 삼중 및 기타 팔레트를 생성하고 HEX, RGB, HSL, HSV 또는 CMYK를 복사합니다. 아무것도 업로드되지 않았습니다.
그라디언트 편집기
브라우저에서 선형 및 방사형 CSS 그래디언트를 구축하세요. 색상 정지점을 드래그하고, 각도를 설정하고, CSS, HEX, RGB, HSL, HSV 또는 CMYK를 복사하세요. 아무것도 업로드되지 않았습니다.
색상 팔레트 생성기
브라우저에서 색상 팔레트를 구축하고 잠그고 섞으세요. HEX, CSS 변수 또는 JSON을 복사하고, PNG 또는 SVG를 내보내고, 사진에서 색상을 추출합니다. 아무것도 업로드되지 않았습니다.
컬러 전송
두 번째 이미지의 색상을 사용하여 사진을 다시 색칠합니다. 강도 슬라이더와 밝기 보존 옵션을 통해 브라우저에서 실시간으로 미리 볼 수 있습니다. 아무것도 업로드되지 않았습니다.
전기 드림 필터
효과 → 색상에서 사진에 영화 같은 빛을 더해보세요. 소프트웨어를 설치할 필요 없이 브라우저에서 PictorX를 무료로 사용하세요.
시도해 볼 준비가 되셨나요?
브라우저에서 PictorX를 엽니다. 설치가 필요 없고 시작하는 데 신용 카드가 필요하지 않습니다.
색상환을 사용해 보세요