[Kotlin][Android] 슬라이더와 애니메이션을 활용한 RGB 색상 조합기 만들기

오늘은 슬라이더를 움직여 RGB 값을 조정하면 실시간으로 색상이 변경되는 

RGB 색상 조합기를 만들어보겠습니다. 

 

1) RGBColorPickerDemo 

@Composable
fun RGBColorPickerDemo() {
    var red by remember { mutableStateOf(0f) }
    var green by remember { mutableStateOf(0f) }
    var blue by remember { mutableStateOf(0f) }

    val animatedColor by animateColorAsState(
        targetValue = Color(red / 255, green / 255, blue / 255)
    )

 

각 red, green, blue는 컴퓨터 그래픽이나 디지털 디지털 디스플레이에서 색상을 구성하는 기본 요소인 RGB 삼원색 (Primary Colors) 을 의미합니다. 이 세 가지 색상을 다양한 비율로 조합하여 수 백만 가지 색상을 표현할 수 있습니다. 

오늘은 위 세 가지 색상을 직접 다양한 비율로 조합해볼 수 있는 색상 조합기를 만들어볼 예정입니다. 

 

 

 

• RGB 모델의 특징 
  • 가산 혼합 (Additive Color Mixing)
  • RGB 삼원색을 더하면 더 밝아지고, 모두 합치면 흰색이 됩니다.
  •  예:
    • 빨강 + 초록 = 노랑
    • 초록 + 파랑 = 청록
    • 파랑 + 빨강 = 자홍 (보라)
  • 조명이나 화면과 같은 빛 기반 디스플레이에서 사용됩니다.
  • 값 범위
  • 일반적으로 0~255의 범위를 사용합니다.
  • 0은 해당 색상이 없는 상태(검정), 255는 최대 강도(완전한 색, 흰색) 입니다.     

 

2) 화면 구성 

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(
        text = "RGB Color Picker",
        fontSize = 24.sp,
        modifier = Modifier.padding(bottom = 16.dp)
    )

 

 

Column 레이아웃은 위에서 아래로 요소를 나열하는 레이아웃 입니다. 

fillMaxSize() 를 사용해, 화면 전체를 채우도록 설정해줍니다. 또한 padding 값을 설정해 화면 테두리에 여백을 추가합니다. 

 

 

3) 색상 박스 

Box(
    modifier = Modifier
        .size(150.dp)
        .padding(16.dp)
        .background(animatedColor)
)

 

Box 는 사각형 컨테이너를 생성하는 요소입니다. 

너비와 높이, 배경색상을 설정해줍니다. 

 

 

4) RGBSlider 함수 

@Composable
fun RGBSlider(label: String, value: Float, onValueChange: (Float) -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.Start
    ) {
        Text(text = label, fontSize = 18.sp)
        Slider(
            value = value,
            onValueChange = { onValueChange(it) },
            valueRange = 0f..255f,
            modifier = Modifier.padding(vertical = 8.dp)
        )
    }
}

 

RGBSlider 함수는 슬라이더 UI를 생성합니다.

슬라이더를 움직이면 각각의 red, green, blue 값이 변경됩니다.

 

 

5) HEX 코드로 변환

(red.toInt() shl 16) or (green.toInt() shl 8) or blue.toInt()

헥스 코드(HEX Code)**는 **16진수(Hexadecimal)**를 사용해 색상을 표현하는 방법입니다. 

웹 개발이나 디자인에서 색상을 정의할때 사용되며 RGB 값을 기반으로 만들어집니다.

예: RGB 값 (255, 0, 0) → HEX 값 #FF0000 (빨강) 

 

 

 

아래는 전체 코드입니다 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            RGBColorPickerDemo()
        }
    }
}

@Composable
fun RGBColorPickerDemo() {
    var red by remember { mutableStateOf(0f) }
    var green by remember { mutableStateOf(0f) }
    var blue by remember { mutableStateOf(0f) }

    val animatedColor by animateColorAsState(
        targetValue = Color(red / 255, green / 255, blue / 255)
    )

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "RGB Color Picker",
            fontSize = 24.sp,
            modifier = Modifier.padding(bottom = 16.dp)
        )


        Box(
            modifier = Modifier
                .size(150.dp)
                .padding(16.dp)
                .background(animatedColor)
        )

        Spacer(modifier = Modifier.height(16.dp))

        RGBSlider("Red", red) { red = it }
        RGBSlider("Green", green) { green = it }
        RGBSlider("Blue", blue) { blue = it }

        Text(
            text = "Current Color: #${
                Integer.toHexString((red.toInt() shl 16) or (green.toInt() shl 8) or blue.toInt())
                    .uppercase()
            }",
            textAlign = TextAlign.Center,
            fontSize = 16.sp
        )
    }
}


@Composable
fun RGBSlider(label: String, value: Float, onValueChange: (Float) -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.Start
    ) {
        Text(text = label, fontSize = 18.sp)
        Slider(
            value = value,
            onValueChange = { onValueChange(it) },
            valueRange = 0f..255f,
            modifier = Modifier.padding(vertical = 8.dp)
        )
    }

}

 

 

 

시연 영상입니다