포트폴리오 컬러 팔레트 조합 (20가지 선택 + Hex)

강력한 포트폴리오 컬러 팔레트는 단순히 "멋져" 보이는 것 이상의 역할을 합니다. 당신의 취향, 솜씨, 그리고 작업의 완성도에 대한 기대치를 조용히 설정합니다. 중립색과 강조색의 적절한 조합은 사례 연구를 더 쉽게 스캔할 수 있게 하고 CTA를 더 신뢰할 수 있게 만듭니다.

아래는 웹사이트, 이력서, 프레젠테이션 및 개인 브랜딩에 복사, 수정 및 시각화할 수 있는 20개 이상의 포트폴리오 색상 조합 아이디어(HEX 색상 코드 포함)입니다.

포트폴리오 팔레트가 효과적인 이유

포트폴리오 디자인 색상은 많은 역할을 합니다: 계층 구조를 만들고, 주의를 유도하며, 방문자가 무엇이 가장 중요한지(역할, 결과 및 주요 비주얼) 이해하도록 돕습니다. 팔레트가 일관되면 다양한 프로젝트에서도 작업이 더 응집력 있게 보입니다.

대부분의 훌륭한 포트폴리오 색상 조합은 기본에 중립색을 사용하고(콘텐츠를 읽기 쉽게 유지) 액션과 하이라이트를 위해 하나의 의도적인 강조색을 사용합니다. 이 접근 방식은 UI를 차분하게 유지하면서도 브랜드 느낌을 줍니다.

마지막으로, 신뢰할 수 있는 색상 체계는 마찰을 줄입니다: 깨끗한 대비는 접근성을 향상시키고, 반복되는 강조색 사용은 링크, 버튼 및 인터랙티브 상태를 즉시 인식하도록 눈을 훈련시킵니다.

20개 이상의 포트폴리오 컬러 팔레트 아이디어(HEX 코드 포함)

1) 미드나잇 리넨

HEX: #0b1320 #1f2a44 #f2efe8 #c7b8a6 #b46a55

분위기: 세련된, 차분한, 편집적인

최적: 2d ui 포트폴리오 홈페이지 목업

늦은 밤 스튜디오 조명 아래 리넨처럼 세련되고 차분한 이 톤들은 깊은 잉크 블루와 따뜻하고 촉각적인 중립색의 균형을 맞춥니다. 헤더와 내비게이션에는 어두운 색조를 사용하고, 본문 섹션과 여백에는 리넨과 샌드색을 사용하세요. 테라코타는 버튼, 태그 또는 주요 링크에 절제된 강조색으로 가장 잘 작동합니다. 팁: #f2efe8 위에 #0b1320 텍스트를 배치하여 선명하고 인쇄물 같은 느낌을 위해 높은 대비를 유지하세요.

media.io를 사용하여 생성된 미드나잇 리넨 이미지 예시

Media.io

Media.io는 브라우저에서 비디오, 이미지 및 오디오를 생성하고 편집하는 온라인 AI 스튜디오입니다.

지금 무료로 사용해보기

2) 스튜디오 콘크리트

HEX: #2b2d31 #5a6068 #d8dadd #f7f7f5 #ff6b4a

분위기: 산업적인, 현대적인, 활기찬

최적: 평면 배경의 그래픽 디자인 포스터

산업적이고 현대적인 이 세트는 콘크리트 벽, 부드러운 햇빛, 그리고 강렬한 네온 마커처럼 느껴집니다. 타입 계층 구조와 구조에 회색을 사용하여 레이아웃을 구축하고, 따뜻한 오프화이트로 여백을 열어주세요. 오렌지-레드는 CTA나 단일 헤드라인 라인의 초점 요소로 가장 강력합니다. 팁: 팔레트가 스포티하지 않고 세련되게 유지되도록 강조색을 한두 개의 형태로 제한하세요.

media.io를 사용하여 생성된 스튜디오 콘크리트 이미지 예시

3) 갤러리 세이지

HEX: #1f2f2b #3f5f55 #a6b89a #e7e4d9 #c07a4b

분위기: 자연스러운, 큐레이션된, 차분한

최적: 평면 배경의 브랜드 아이덴티티 키트 레이아웃

자연스럽고 큐레이션된 이 녹색과 따뜻한 중립색은 천연 나무 프레임이 있는 조용한 갤러리를 연상시킵니다. 로고와 제목에는 깊은 녹색-검정을 사용하고, 배경과 패널에는 세이지와 오트밀을 채우세요. 구리 톤은 봉인, 아이콘 또는 브랜드 키트의 단일 하이라이트 라인에 완벽합니다. 팁: 프리미엄한 느낌을 유지하려면 구리를 충분한 #e7e4d9 공간과 함께 사용하세요.

media.io를 사용하여 생성된 갤러리 세이지 이미지 예시

4) 잉크 앤 코랄

HEX: #0d1b2a #1b263b #415a77 #e0e1dd #ff5d5d

분위기: 자신감 있는, 깔끔한, 높은 대비

최적: 2d ui 사례 연구 페이지 목업

자신감 있고 깔끔한 잉크 블루는 선명한 블레이저처럼 느껴지며, 코랄은 현대적인 창의적 불꽃을 더합니다. 기본 텍스트와 내비게이션에는 가장 어두운 색조를 사용하고, 넉넉한 섹션 배경에는 옅은 회색을 사용하세요. 코랄은 링크 및 진행 상태와 같은 UI 전체의 하나의 액션 색상으로 가장 잘 작동합니다. 팁: 페이지 상단의 무거운 느낌을 피하려면 큰 어두운 블록을 #415a77로 부드럽게 하세요.

media.io를 사용하여 생성된 잉크 앤 코랄 이미지 예시

5) 테라코타 프루프

HEX: #2a1f1a #6b3f2a #c56b45 #f3e9df #2f4f4f

분위기: 공예적인, 따뜻한, 안정적인

최적: 스튜디오의 현실적인 패키징 목업

점토, 에스프레소, 낡은 종이처럼 따뜻하고 안정적인 이 믹스는 공예 중심 브랜드에 적합합니다. 크림을 패키징 베이스로 사용한 다음 라벨과 일러스트레이션 디테일에 테라코타 톤을 레이어하세요. 딥 틸-그린은 성분 목록이나 작은 배지에 스마트한 대비를 제공합니다. 팁: 가독성과 수제 프리미엄 마감을 위해 타이포그래피를 #2a1f1a로 유지하세요.

media.io를 사용하여 생성된 테라코타 프루프 이미지 예시

6) 소프트 피치 그리드

HEX: #2b2f3a #5d6472 #f6d6c9 #f8f4f0 #d0a37f

분위기: 친근한, 가벼운, 절제된

최적: 평면 배경의 이벤트 전단 디자인

친근하고 가벼운 이 톤들은 블러시 페이퍼, 흑연 연필, 부드러운 스튜디오 조명처럼 느껴집니다. 대부분의 캔버스를 거의 흰색으로 채우고, 타입과 그리드 라인에 슬레이트 회색으로 구조를 구축하세요. 피치와 따뜻한 탄은 날짜, 콜아웃 또는 작은 아이콘에 친근함을 더합니다. 팁: 소리치지 않고 시선을 유도하려면 주요 텍스트 블록 뒤에 피치를 사용하세요.

media.io를 사용하여 생성된 소프트 피치 그리드 이미지 예시

7) 씨글라스 레쥬메

HEX: #0f1f2b #1f4d5a #5ea3a3 #d9f1ef #f4fbfa

분위기: 신선한, 신뢰할 수 있는, 고요한

최적: 편집 이력서 페이지 레이아웃

신선하고 고요한 이 씨글라스 블루는 해안의 빛과 맑은 물을 연상시킵니다. 제목과 본문 텍스트에는 딥 네이비를 사용하고, 섹션 구분선과 작은 아이콘에는 틸을 사용하세요. 옅은 아쿠아와 거의 흰색은 장문 콘텐츠를 위해 페이지를 개방적이고 읽기 쉽게 유지합니다. 팁: 레이아웃을 차분하고 전문적으로 유지하려면 스킬 바나 타임라인에 #5ea3a3을 사용하세요.

media.io를 사용하여 생성된 씨글라스 레쥬메 이미지 예시

8) 브론즈 블루프린트

HEX: #0a1a2a #17324a #2b556e #b08d57 #f2ede3

분위기: 프리미엄, 기술적인, 절제된

최적: 2d ui 대시보드 목업

프리미엄하고 절제된 이 세트는 아이보리 종이에 브론즈 자로 그린 잉크 청사진처럼 읽힙니다. 레이어드 블루는 크게 소리내지 않고 패널, 차트 및 사이드바에 명확한 계층 구조를 만듭니다. 브론즈는 신뢰성을 위해 구축된 포트폴리오 색상 체계에서 활성 상태, 주요 메트릭 또는 작은 배지에 대한 날카로운 하이라이트를 만듭니다. 팁: 최대 효과와 세련된 모습을 위해 어두운 배경에 브론즈를 유지하세요.

media.io를 사용하여 생성된 브론즈 블루프린트 이미지 예시

9) 플럼 노트북

HEX: #1d1024 #40214e #7a3b74 #e4d3ea #f0b7a6

분위기: 창의적인, 분위기 있는, 재미있는

최적: 평면 배경의 소셜 미디어 캐러셀 그래픽

무디하면서도 경쾌한 이 자두 톤은 잉크와 파스텔 형광펜으로 가득 찬 스케치북 여백처럼 느껴집니다. 가장 어두운 보라색은 대담한 헤드라인에 사용하고 라벤더로 보조 패널과 캡션을 부드럽게 만드세요. 복숭아 액센트는 슬라이드 번호나 단순한 아이콘 세트와 같은 반복 요소에 이상적입니다. 팁: 가장 어두운 보라색 위에 긴 단락을 배치하지 말고 짧고 강렬한 텍스트에만 사용하세요.

media.io를 사용하여 생성된 자두 노트북 이미지 예시

10) 포레스트 페이퍼

HEX: #101d18 #244b3a #5f8c6d #dfe8d9 #f7f4ea

분위기: 자연스러운, 안정적인, 회복적인

최적: 수채화 식물 일러스트레이션

자연스럽고 회복적인 이 녹색들은 수제 종이에 드리운 그늘진 잎사귀처럼 보입니다. 윤곽선과 제목에는 깊은 포레스트를 사용한 다음 #244b3a와 #5f8c6d로 중간 톤 잎을 만드세요. 연한 녹색과 따뜻한 크림은 카드, 슬라이드 또는 일러스트레이션 여백에 부드러운 배경을 만듭니다. 팁: 통풍이 잘 되는 식물적 분위기를 유지하려면 가장 어두운 녹색을 작은 영역에만 유지하세요.

media.io를 사용하여 생성된 포레스트 페이퍼 이미지 예시

11) 코발트 액센트

HEX: #0b1020 #142a6e #2e5fff #d9e2ff #f2f4f8

분위기: 날카로운, 디지털, 고에너지

최적: 2d ui 히어로 섹션 목업

날카롭고 디지털적인 이 팔레트는 레이저 블루 커서 글로우가 있는 야간 모드처럼 느껴집니다. 대부분의 표면을 부드러운 회색과 연한 페리윙클로 유지하여 깔끔한 인터페이스를 만드세요. 코발트는 주요 작업, 선택된 탭 및 링크에 사용하고 더 어두운 네이비는 헤드라인을 고정시킵니다. 팁: #142a6e에서 #2e5fff로의 그라디언트를 시도하여 추가 색상 없이 현대적인 히어로 배너를 만드세요.

media.io를 사용하여 생성된 코발트 액센트 이미지 예시

12) 샌드스톤 모노

HEX: #1b1b1b #4a4a4a #8a8a8a #d6d2c4 #faf7f0

분위기: 미니멀, 시대를 초월한, 갤러리 같은

최적: 잡지 레이아웃 스프레드

미니멀하고 갤러리 같은 이 회색과 모래 톤은 돌, 연필심, 보관용 종이를 연상시킵니다. 타이포그래피에는 검정과 차콜을 사용하고 여백과 배경 블록에는 따뜻한 밝은 뉴트럴에 의존하세요. 중간 회색은 캡션, 각주 및 독자를 안내하는 은은한 규칙에 잘 작동합니니다. 팁: 더 많은 색상을 추가하는 대신 종이 질감이나 가벼운 노이즈를 통해 텍스처를 도입하세요.

media.io를 사용하여 생성된 샌드스톤 모노 이미지 예시

13) 체리 온 슬레이트

HEX: #1a2433 #334155 #64748b #f1f5f9 #e11d48

분위기: 현대적인, 자신감 있는, 선명한

최적: 2d ui 제품 랜딩 페이지 목업

현대적이고 선명한 슬레이트 블루는 안정적인 리듬을 설정하고 체리 레드는 자신감 있는 펀치를 더합니다. 숨 쉴 공간을 위해 밝은 배경을 사용하고 네비게이션, 카드 및 은은한 테두리에는 슬레이트 쉐이드를 유지하세요. 여전히 전문적으로 느껴지는 포트폴리오 색상 조합 아이디어의 경우 체리는 버튼과 링크 전체에 걸쳐 단일 액션 색상으로 가장 잘 작동합니다. 팁: 빨간색을 긴 텍스트 블록에서 멀리 두고 마이크로 인터랙션과 하이라이트를 위해 예약하세요.

media.io를 사용하여 생성된 체리 온 슬레이트 이미지 예시

14) 오로라 민트

HEX: #0e1b2a #224b46 #4fd1c5 #d9fff8 #fff7e6

분위기: 신선한, 낙관적인, 빛나는

최적: 2d ui 온보딩 화면

신선하고 빛나는 민트와 깊은 틸은 유리를 통과하는 빛처럼 느껴집니다. 네이비를 기본 텍스트 색상으로 사용한 다음 민트와 연한 아쿠아로 패널, 카드 및 친근한 일러스트레이션 모양을 전달하세요. 따뜻한 크림은 인터페이스가 너무 차갑게 느껴지는 것을 방지하는 미묘한 균형추입니다. 팁: 온보딩이 보람 있게 느껴지도록 진행 표시기와 성공 상태에 가장 밝은 민트를 유지하세요.

media.io를 사용하여 생성된 오로라 민트 이미지 예시

15) 모카 캔버스

HEX: #231b16 #4b342a #8c6a4a #d8c3a5 #f2efe9

분위기: 아늑한, 장인의, 프리미엄

최적: 제품 라벨 디자인의 사실적인 스튜디오 샷

아늑하고 장인 정신이 느껴지는 이 갈색과 크림은 로스팅 커피, 가죽 저널, 표백하지 않은 캔버스처럼 느껴집니다. 타입과 로고 마크에는 가장 어두운 톤을 사용한 다음 라벨과 패턴 전체에 중간 갈색으로 따뜻함을 구축하세요. 연한 뉴트럴은 패키징이나 룩북을 위해 구성을 깔끔하고 고급스럽게 유지합니다. 팁: 새로운 색조를 도입하지 않고 깊이를 위해 중간 갈색 범위에 은은한 엠보싱이나 포일 효과를 추가하세요.

media.io를 사용하여 생성된 모카 캔버스 이미지 예시

16) 선셋 타입

HEX: #121826 #2a2f45 #ff8a5b #ffd2a6 #fff3e9

분위기: 따뜻한, 현대적인, 매력적인

최적: 단색 배경의 타이포그래피 포스터

따뜻하고 매력적인 이 톤은 어두운 스튜디오 벽에 부딪히는 일몰 빛처럼 보입니다. 대담한 타입과 강한 정렬을 위해 깊은 인디고 페어를 사용한 다음 하이라이트와 보조 모양을 위해 복숭아와 살구를 레이어링하세요. 연한 블러시는 특히 큰 포스터나 커버 슬라이드의 경우 배경을 부드럽고 읽기 쉽게 유지합니다. 팁: 추가 그래픽 없이 즉각적인 계층 구조를 만들기 위해 헤드라인 뒤에 살구(#ffd2a6)를 시도하세요.

media.io를 사용하여 생성된 선셋 타입 이미지 예시

17) 아이시 라벤더

HEX: #131a2a #2f3a5f #a3a6ff #e8e9ff #f7f7ff

분위기: 시원한, 세련된, 미래지향적인

최적: 2d ui 설정 페이지 목업

시원하고 세련된 이 라벤더 성향의 믹스는 서리가 낀 유리와 상쾌한 겨울 공기처럼 느껴집니다. 제목과 토글에는 가장 어두운 네이비를 사용한 다음 부드러운 라일락이 배경과 카드를 채우게 하세요. 더 밝은 페리윙클은 네온처럼 느껴지지 않으면서 선택된 상태와 슬라이더에 이상적입니다. 팁: UI가 통풍이 잘 되고 현대적으로 유지되도록 #e8e9ff를 사용하여 테두리를 은은하게 유지하세요.

media.io를 사용하여 생성된 아이시 라벤더 이미지 예시

18) 빈티지 시아노타입

HEX: #071a2a #0b3a53 #2c7da0 #a9d6e5 #eaf4f4

분위기: 향수적인, 학문적인, 해양의

최적: 편집 잡지 커버 레이아웃

향수적이고 해양적인 이 블루는 시아노타입 프린트와 오래된 지도책을 연상시킵니다. 매스트헤드와 강한 타입 블록에는 깊은 네이비를 사용하고 소제목과 콜아웃에는 중간 블루를 유지하세요. 연한 아쿠아 쉐이드는 순백색이 아닌 여전히 색이 있다고 느껴지는 깔끔한 네거티브 스페이스를 만듭니다. 팁: 학문적이고 정교한 마무리를 위해 #2c7da0에 얇은 규칙과 작은 아이콘을 추가하세요.

media.io를 사용하여 생성된 빈티지 시아노타입 이미지 예시

19) 올리브 레저

HEX: #161c12 #3b4a2a #7c8a5b #e6e2d3 #c9a66b

분위기: 전통적인, 자연적인, 믿을 수 있는

최적: 스튜디오의 문구 세트 목업

전통적이고 믿을 수 있는 올리브와 카키 톤은 오래된 원장, 밀랍 인장, 낡은 책 천을 상기시킵니다. 로고와 헤드라인에는 깊은 올리브를 사용한 다음 배경과 종이 재고에는 연한 양피지에 기대세요. 클래식한 경향의 포트폴리오 색상 조합의 경우 은은한 골드는 규칙, 아이콘 또는 인장에서 우아한 액센트가 됩니다. 팁: 보관용 느낌을 유지하기 위해 골드를 작게 그리고 일관되게 유지하세요. 예를 들어 섹션당 하나의 하이라이트처럼요.

media.io를 사용하여 생성된 올리브 레저 이미지 예시

20) 로즈 쿼츠 코드

HEX: #1a1f2b #3b4252 #b48ead #e5d7e9 #f6f1f5

분위기: 부드러운, 스마트한, 현대적인

최적: 2d ui 개발자 포트폴리오 섹션 목업

부드럽고 스마트한 이 톤은 로즈 쿼츠 빛으로 따뜻해진 황혼 회색 코드 에디터처럼 느껴집니다. 코드 블록, 네비게이션 및 헤드라인에는 차콜 페어를 사용하고 블러시 뉴트럴이 페이지 배경을 전달하게 하세요. 모브 쉐이드는 유치해 보이지 않으면서 태그, 링크 상태 및 은은한 데이터 하이라이트에 완벽합니다. 팁: 읽기 쉬운 포트폴리오 색상 팔레트의 경우 #f6f1f5 위에 #1a1f2b로 본문 텍스트를 설정하고 액센트를 단일 모브 가중치로 유지하세요.

media.io를 사용하여 생성된 로즈 쿼츠 코드 이미지 예시

21) 클레이 앤 클라우드

HEX: #1c2230 #3d4a5c #b7c3d0 #eef2f6 #c46a5a

분위기: 균형 잡힌, 전문적인, 친근한

최적: 2d ui 소개 페이지 목업

균형 잡히고 친근한 이 믹스는 햇볕에 구운 클레이가 있는 폭풍우 같은 데님처럼 읽힙니다. 구조와 타이포그래피에는 깊은 블루 그레이를 사용한 다음 클라우드 톤이 큰 섹션과 카드를 밝게 하세요. 클레이는 CTA, 타임라인 마커 또는 작은 일러스트레이션을 위한 친근한 액센트가 됩니다. 팁: 그림자를 은은하게 유지하고 테두리에는 #b7c3d0에 의존하여 레이아웃이 통풍이 잘 되도록 유지하세요.

media.io를 사용하여 생성된 클레이 앤 클라우드 이미지 예시

포트폴리오와 잘 어울리는 색상은?

뉴트럴은 대부분의 포트폴리오 팔레트의 중추입니다. 왜냐하면 작업 샘플이 컨트롤을 유지하도록 하기 때문입니다. 가독성과 계층 구조가 중요한 레이아웃을 위해 잉크/네이비, 차콜, 따뜻한 오프 화이트 및 부드러운 회색을 생각하세요.

그런 다음 상호작용과 강조를 나타내는 하나의 액센트 색상을 추가하세요—버튼, 링크, 칩 및 주요 메트릭. 코랄, 코발트, 민트, 브론즈 또는 은은한 골드는 모두 일관되게 사용될 때 잘 작동합니다.

프로젝트가 시각적으로 다양하다면 포트폴리오 색상 구성을 절제되게 유지하고 이미지가 다양성을 제공하도록 하세요. 안정적인 배경 + 단일 액센트는 일반적으로 많은 경쟁 색조보다 더 프리미엄하게 느껴집니다.

실제 디자인에서 포트폴리오 컬러 팔레트를 사용하는 방법

색상을 선택하는 것이 아니라 역할을 할당하는 것으로 시작하세요: 기본 텍스트용 하나, 보조 텍스트용 하나, 표면용 하나(카드/섹션), 테두리/구분선용 하나, 그리고 액센트 작업용 하나. 이렇게 하면 포트폴리오 색상 조합을 페이지 전체에서 반복 가능하게 만듭니다.

접근성을 위해 의도적으로 대비를 사용하세요: 밝은 표면의 어두운 텍스트는 사례 연구 및 이력서에 여전히 가장 쉬운 승리입니다. 활성 탭, 호버 상태 및 하이라이트와 같은 작은 UI 순간을 위해 포화된 색상을 저장하세요.

마지막으로 구성 요소 전체에 걸쳐 일관성을 유지하세요—버튼, 태그, 아이콘, 차트 및 콜아웃은 전체 사이트가 장식된 것이 아니라 디자인된 것처럼 느껴지도록 동일한 액센트 논리를 공유해야 합니다.

AI로 포트폴리오 팔레트 비주얼 만들기

개인 사이트를 위한 새로운 룩을 제안하거나 브랜드 키트를 구축하는 경우 빠른 목업 생성은 전체 재디자인을 커밋하기 전에 팔레트를 검증하는 데 도움이 됩니다. 간단한 히어로, 사례 연구 페이지 또는 이력서 레이아웃은 분위기를 테스트하기에 충분한 경우가 많습니다.

Media.io를 사용하면 팔레트 아이디어를 빠르게 비주얼로 전환한 다음 색상이 틈새 시장과 청중에게 적합하다고 느껴질 때까지 프롬프트, 구성 및 조명을 반복할 수 있습니다.

디바이스 전체에서 브랜딩을 일관되게 유지하기 위해 동일한 액센트 색상을 사용하여 하나의 "라이트 모드"와 하나의 "다크 모드" 개념을 만들어 보세요.

다음: 옥스퍼드 블루 컬러 팔레트