[CSS] currentColor

2026.05.26·CSS

CSS에서 같은 색상을 여러 속성에 반복해서 작성해야 할 때 currentColor를 사용할 수 있습니다.

currentColor는 현재 요소의 color 값을 가져와 다른 색상 관련 속성에서 다시 사용할 수 있게 해주는 CSS 키워드입니다.

currentColor

currentColor는 해당 요소의 계산된 color 값을 나타냅니다.

예를 들어 다음과 같이 텍스트 색상을 지정할 수 있습니다.

.link {
    color: #3366ff;
}

이 요소의 border-color, background-color, fill 같은 속성에서 currentColor를 사용하면 현재 color 값인 #3366ff를 그대로 사용할 수 있습니다.

.link {
    color: #3366ff;
    border: 1px solid currentColor;
}

색상값을 여러 곳에 반복해서 작성하지 않아도 color를 기준으로 다른 속성의 색상을 맞출 수 있습니다.

color 값 재사용

currentColor의 가장 큰 특징은 요소의 color 값이 변경되면 이를 사용하는 다른 속성도 함께 변경된다는 점입니다.

.button {
    color: #3366ff;
    border: 1px solid currentColor;
}
 
.button:hover {
    color: #ff6600;
}

기본 상태에서는 텍스트와 테두리가 모두 #3366ff를 사용합니다.

Hover 상태에서 color가 #ff6600으로 변경되면 border-color도 별도로 수정하지 않아도 같은 색상으로 변경됩니다.

SVG 아이콘에서 사용하기

currentColor는 SVG 아이콘의 fill이나 stroke에도 사용할 수 있습니다.

.button {
    color: #3366ff;
}
 
.button svg {
    fill: currentColor;
}

이 경우 SVG 아이콘은 부모 요소에서 상속받은 color 값을 사용합니다.

.button:hover {
    color: #ff6600;
}

Hover 시 텍스트 색상이 변경되면 아이콘 색상도 함께 변경됩니다.

SVG의 fill 또는 stroke가 요소 자체에서 다른 값으로 지정되어 있다면 해당 스타일이 우선할 수 있으므로 실제 SVG 구조도 함께 확인해야 합니다.

가상 요소에서 사용하기

currentColor는 ::before, ::after 같은 가상 요소의 색상을 현재 요소와 맞출 때도 유용합니다.

.more-link {
    color: #3366ff;
}
 
.more-link::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: currentColor;
}

가상 요소에 별도의 색상값을 작성하지 않아도 링크의 color를 그대로 사용할 수 있습니다.

Hover 상태에서 링크 색상을 변경하면 가상 요소의 배경색도 함께 변경됩니다.

상속과 currentColor

color 속성은 기본적으로 상속되는 속성입니다.

따라서 자식 요소에 별도의 color가 지정되어 있지 않다면 부모 요소의 색상을 상속받고, 자식 요소에서 사용하는 currentColor 역시 그 값을 기준으로 동작합니다.

.card {
    color: #333333;
}
 
.card-icon {
    border: 1px solid currentColor;
}

.card-icon에 별도의 color가 없다면 부모 .card의 color를 상속받아 테두리에도 #333333이 사용됩니다.

반대로 자식 요소에 별도의 color를 지정하면 currentColor는 그 자식 요소의 color 값을 사용합니다.

언제 사용하면 좋을까?

currentColor는 하나의 색상을 기준으로 여러 UI 요소의 색상을 함께 관리할 때 유용합니다.

대표적으로 다음과 같은 경우에 사용할 수 있습니다.

텍스트와 테두리 색상을 동일하게 유지할 때

버튼의 텍스트와 SVG 아이콘 색상을 함께 변경할 때

링크와 밑줄 또는 가상 요소의 색상을 맞출 때

Hover 상태에서 여러 색상 속성을 한 번에 변경할 때

색상을 각각 지정하는 대신 color를 기준값으로 사용하면 수정할 위치가 줄어들고 스타일의 일관성을 유지하기 쉬워집니다.

정리

currentColor는 현재 요소의 color 값을 다른 색상 속성에서 재사용하기 위한 CSS 키워드입니다.

.element {
    color: #3366ff;
    border-color: currentColor;
}

color 값이 바뀌면 currentColor를 사용한 속성도 함께 변경되기 때문에 테두리, SVG 아이콘, 가상 요소처럼 텍스트 색상과 함께 동작해야 하는 UI를 구성할 때 유용합니다.

특히 Hover처럼 상태에 따라 색상이 바뀌는 요소에서는 같은 색상값을 여러 번 작성하지 않고 하나의 color를 기준으로 관리할 수 있습니다.