가이드 / Finipage / 페이지 고치기

HTML 페이지 색을 브랜드 색으로 바꾸기

Qorlize 팀 작성 · 마지막 검토 2026년 11월 12일

Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기

템플릿이나 AI 도구로 만든 페이지가 잘 돌아가는데 파란색이 우리 브랜드 색이 아닙니다. 회사 색은 짙은 청록 #0F766E인데 페이지의 버튼, 링크, 제목은 전부 #4F46E5 같은 보라빛 파랑입니다. 1분이면 끝날 것 같지만 막상 열어 보면 같은 파랑이 열두 군데, 표기법도 세 가지, 마우스를 올려야만 보이는 색까지 숨어 있습니다. 색이 어디에 저장되는지 알면 고칠 곳이 한 군데인지 마흔 군데인지 먼저 가늠할 수 있습니다.

페이지가 색을 적어 두는 곳

HTML 페이지에서 색을 정하는 자리는 다섯 가지이고, 한 페이지가 여러 방식을 섞어 쓰는 경우가 많습니다.

• 인라인 스타일: 요소 하나에 직접 적은 <a style="background:#4F46E5"> 같은 형태입니다. 그 요소에만 적용되고, 다른 규칙 대부분보다 우선합니다.
• <style> 블록: <head> 안의 .button { background: #4F46E5; } 같은 규칙입니다. 규칙 하나가 그 클래스가 붙은 요소 전부에 색을 입힙니다.
• 외부 스타일시트: <link rel="stylesheet" href="css/style.css">로 연결된 별도 파일입니다. 규칙은 똑같이 동작하지만 그 파일을 따로 열어야 합니다.
• CSS 사용자 정의 속성(변수): 보통 맨 위에 :root { --primary: #4F46E5; }로 정의하고 background: var(--primary);처럼 가져다 씁니다. 값을 한 번만 바꾸면 쓰인 곳이 모두 따라 바뀝니다.
• 유틸리티 클래스: Tailwind를 쓰는 AI 생성 페이지에서 흔한 class="bg-indigo-600 text-white hover:bg-indigo-700" 같은 형태입니다. 색이 클래스 이름 안에 들어 있어서, 바꾸려면 클래스를 고치거나 테마 설정을 바꿔야 합니다(아래 참고).

잊기 쉬운 곳에도 색이 숨어 있습니다. 그라데이션(linear-gradient(...)), 그림자, 테두리, :hover·:focus 상태, fill 속성이 붙은 SVG 아이콘, 그리고 이미지입니다. PNG나 JPEG 안에 그려진 색은 CSS로 바꿀 수 없으니 이미지를 고치거나 새로 만들어야 합니다.

검사 도구로 규칙 찾기

데스크톱 브라우저에는 어떤 규칙이 요소에 색을 입히는지 보여 주는 개발자 도구가 있습니다. Chrome, Edge, Firefox에서는 요소를 오른쪽 클릭하고 검사(Inspect)를 고르거나 F12를 누릅니다. Safari는 먼저 설정의 고급 탭에서 웹 개발자용 기능 보기를 켜야 합니다.

1. 색을 바꾸고 싶은 버튼이나 제목을 오른쪽 클릭해 검사를 고르면 HTML 구조에서 그 요소가 강조됩니다.
2. 옆의 스타일(Styles) 패널을 봅니다. 실제로 적용되는 규칙이 위쪽에 나오고, 줄이 그어진 속성은 위의 다른 규칙에 밀려 적용되지 않는 것입니다.
3. color, background, background-color, border-color를 찾습니다. 규칙 옆에 출처가 나옵니다. 인라인 스타일이면 element.style, 외부 파일이면 style.css:42처럼 파일 이름과 줄 번호, <style> 블록이면 HTML 파일 이름이 보입니다.
4. 값이 var(--primary)라면 실제 색은 변수에 있습니다. 스타일 패널에서 --primary를 검색해 정의된 곳(대개 :root)을 찾습니다.

스타일 패널에서 값을 바꿔 새 색을 미리 볼 수는 있지만 저장되지는 않습니다. 새로고침하면 사라집니다. 여기서는 시험만 해 보고, 실제 변경은 파일에서 하십시오.

마우스를 올렸을 때의 색은 Chrome·Edge 스타일 패널의 :hov 버튼으로 선택한 요소를 :hover 상태로 고정해 확인할 수 있습니다.

hex, rgb, hsl 빠르게 읽기

같은 색도 여러 방식으로 적을 수 있습니다. 파일에서 옛 색을 검색할 때 이 점이 중요합니다.

위의 세 예는 모두 같은 파랑입니다. 파일에서 옛 색을 찾을 때는 hex 값을 대문자·소문자 양쪽으로 검색하고, 알고 있다면 rgb·hsl 표기도 찾아보십시오. 브랜드 가이드는 보통 hex 값을 주는데, 스타일 패널에서 값 옆의 작은 색 네모를 누르면 나오는 색 고르기 창에서 표기법을 바꿔 볼 수 있습니다.

글자는 읽혀야 합니다

로고에서 멋진 브랜드 색이 버튼 글자나 밝은 배경 위 링크로는 잘 안 읽히는 경우가 많습니다. 웹 콘텐츠 접근성 지침(WCAG 2.2, 성공 기준 1.4.3)은 일반 글자와 배경 사이에 4.5:1, 큰 글자에는 3:1 이상의 명도 대비를 요구합니다. 큰 글자는 18포인트 이상, 굵은 글자는 14포인트 이상(대략 24px, 굵게 18.5px)을 말합니다.

• 새로 생기는 조합을 모두 확인합니다. 브랜드 색 위의 흰 글자, 흰 바탕 위의 브랜드 색 링크, 마우스를 올렸을 때의 색까지.
• Chrome과 Edge는 스타일 패널에서 글자색 견본을 누르면 나오는 색 고르기 창에 대비율을 보여 줍니다. 온라인 대비 검사기에 hex 값 두 개를 넣어도 됩니다.
• 브랜드 색 위에 흰 글자가 기준에 못 미치면 버튼에는 같은 색의 어두운 톤(hsl의 명도를 낮춘 값)을 쓰고, 정확한 브랜드 색은 큰 제목, 테두리, 장식에 씁니다.
• 노랑이나 민트처럼 밝은 브랜드 색 위에는 흰 글자보다 어두운 글자가 맞는 경우가 대부분입니다.

요소 하나씩 바꿀까, 변수 하나를 바꿀까

바꾸는 방법은 두 가지이고, 어느 쪽이 나은지는 페이지가 어떻게 만들어졌느냐에 달려 있습니다.

요소를 직접 바꾸기. Finipage에서 요소를 클릭하면 오른쪽 속성 패널에 글자색, 배경색, 테두리색 세 칸이 나옵니다. 각 칸에서 색을 고르거나 #0F766E 같은 값을 직접 입력할 수 있고, 변경은 선택한 요소에만 적용됩니다. 제목 글자 일부를 드래그해 고르면 그 부분만 글자색이 바뀝니다. 버튼과 제목이 몇 개뿐이거나 한 구역만 다르게 꾸미고 싶을 때는 눈으로 보며 빠르게 고칠 수 있습니다. 다만 Finipage는 스타일시트, <style> 블록, 변수를 고치지 못하고 CSS나 소스를 직접 편집하는 기능도 없습니다. 파란 요소가 마흔 개인 페이지라면 하나씩 바꿔야 하고, 마우스를 올렸을 때의 색은 거기서 보이지 않습니다.

소스를 한 번에 바꾸기. HTML(또는 CSS 파일)을 VS Code나 메모장 같은 텍스트 편집기로 엽니다.

1. 변수를 쓰는 페이지라면 :root의 --primary(그리고 --primary-dark 같은 관련 변수)를 바꿉니다. 그 변수를 쓰는 곳이 모두 바뀝니다.
2. 변수가 없다면 찾아 바꾸기(두 편집기 모두 Ctrl+H)로 옛 hex 값을 새 값으로 바꿉니다. 대문자·소문자를 모두 찾고, 모두 바꾸기 전에 검색 결과를 하나씩 확인하십시오.
3. Tailwind 페이지라면 클래스 이름을 바꾸거나(bg-indigo-600을 bg-teal-700으로, hover:bg-indigo-700을 hover:bg-teal-800으로), 페이지가 <script>나 <style> 태그 안의 Tailwind 설정 블록에서 자체 색을 정의하고 있다면 그 값을 바꿉니다.
4. UTF-8 인코딩으로 저장하고, 브라우저에서 열어 마우스를 올렸을 때의 색까지 확인합니다.

실제로는 섞어 쓰는 방법이 편합니다. 공통 색은 텍스트 편집기에서 한 번에 바꾸고, 어두운 배경에 밝은 글자를 쓰는 구역처럼 따로 손볼 몇 군데만 Finipage에서 열어 고치는 식입니다.

다음으로

브랜드를 바꿀 때는 색과 글꼴이 함께 바뀌는 경우가 많습니다. 글꼴 쪽은 웹 페이지 글꼴의 원리와 바꾸는 법을, AI가 만든 페이지에서 손볼 나머지 부분은 AI가 만든 랜딩 페이지 고치기를 참고하십시오.

내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.