2,751
edits
Changes
Jump to navigation
Jump to search
m
Human Interface Guidelines/The Sugar Interface/Colors/lang-ko (view source)
Revision as of 14:08, 4 February 2009
, 14:08, 4 February 20093 revisions
<noinclude>
{{OLPC}}
{{Translation | lang = ko | source = OLPC Human Interface Guidelines/The Sugar Interface/Colors | version = 18291 | source_display = OLPC-HIG-Colors}}
</noinclude>
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
{{hig-subnav-intra-lang | lang=ko
| p_page=Icons
| c_section=The Sugar Interface | c_page=Colors
| n_page=Text and Fonts}}
{{anchor|Colors}}
<!--=== Colores ===-->
=== {{:OLPC Human Interface Guidelines/The Sugar Interface/Colors/lang-ko/title}} ===
{{anchor|Imbuing Color with Meaning}}
====의미로 색깔을 고르기====
색깔에 대한 슈가의 접근법은 독특합니다: 메쉬 상에서 소통하는 ''사람들''을 표시하며, 활동이나 오브젝트가 아닙니다. 이중 컬러를 선택함으로써 아이들은 그들의 노트북과 그들의 참여를 표현합니다. 어느 한 아이의 모든 활동, 오브젝트, 그리고 코멘트는 그 아이 자신의 색깔로 표시되며, 다른 아이들의 노트북에 등장할 때도 마찬가지 입니다; 그 아이의 이름과 성격을 보완하는 시각적 정체성을 형성합니다.
{{ Translated text |
Sugar treats color differently than the typical UI: colors are used in the interface represent the ''individuals'' who are interacting within the mesh, not the activities or objects they are using. Children personalize their laptops and their presence on the mesh by selecting a dual-tone color scheme. All of the activities, objects, and comments belonging to a child take on her own colors—even when they appear on the laptops of other children on the mesh—forming a visual identity that supplements her name and attributes.
| display = block }}
이러한 컬러 처리는 활동 내에서도 마찬가지입니다. 더불어 웹 서피을 진행할 때, 한 아이가 게재한 웹 주소는 그 아이의 색깔로 표현됩니다. 흑백 모드인 경우, 색의 진하기를 조절함으로써 그와 같은 효과를 냅니다.
{{ Translated text |
This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link. Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. When the display runs in grayscale mode, this colored visual identity is less apparent. However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color.
| display = block }}
아이가 아니라 특정 활동에 속한 인터페이스 요소, 버튼, 그리고 기타 아이콘은 가능한 흑백으로 표현함으로써 전세 시스템의 일관성을 유지해 주십시오. 기존 사용자 인터페이스에서 비활성 아이콘을 나타내는 회색 처리는 슈가에 적용되지 않으므로, 주의해야 합니다. [[OLPC Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|비활성 아이콘]]을 참조하십시오.
{{ Translated text |
To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. While removing color as a primary visual clue may seem counter-intuitive, it does encourage the icon's form to clearly indicate its function. Since the laptops will also run in grayscale mode, clearly distinct shapes become essential in the absence of chroma information, and so limiting activity icons to grayscale by default ensures compatibility in both modes. Additionally, keep in mind that the traditional method of "graying-out" inactive buttons and controls simply will not function on the laptops and must be avoided. Instead, please adhere to the guidelines for [[OLPC Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|inactive icons]].
| display = block }}
{{anchor|Contrast in the Munsell Colorspace}}
====문셀 컬러스페이스에서 대조====
이 노트북의 기본적인 컬러 스킴은 컬러와 흑백모드 모두에서 작동해야 하는 제약이 있습니다. 이와같은 이유로, 우리는 적어도 두 가지 [[Munsell]] 밸류 스탭의 achromatic 대조를 위해 노력하고 있습니다.
{{ Translated text |
The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[Munsell]] value steps.
| display = block }}
{{ Translated text |
The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either ≤N3 or ≥N7.
| display = block }}
<table cellspacing='50' style='margin: 1em auto 1em auto'><tr><td>
<!-- TRANSLATION-->
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Pasos Munsell
!style="background:#cccccc"|Color<BR>Relleno!!style="background:#cccccc"|Line value 5
|-
|N10
|style="background:#FFFFFF; color:#7A7A7A"|'''pasos delta 5'''
|-
|N9
|style="background:#E4E4E4; color:#7A7A7A"|'''pasos delta 4'''
|-
|N8
|style="background:#C8C8C8; color:#7A7A7A"|'''pasos delta 3'''
|-
|N7
|style="background:#ADADAD; color:#7A7A7A"|'''pasos delta 2'''
|-
|N6
|style="background:#939393; color:#7A7A7A"|'''pasos delta 1'''
|-
|N5
|style="background:#7A7A7A; color:#7A7A7A"|'''pasos delta 0'''
|-
|N4
|style="background:#616161; color:#7A7A7A"|'''pasos delta 1'''
|-
|N3
|style="background:#494949; color:#7A7A7A"|'''pasos delta 2'''
|-
|N2
|style="background:#343434; color:#7A7A7A"|'''pasos delta 3'''
|-
|N1
|style="background:#222222; color:#7A7A7A"|'''pasos delta 4'''
|-
|N0
|style="background:#000000; color:#7A7A7A"|'''pasos delta 5'''
|}
<!-- ORIGINAL -->
<font size="1">
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Munsell Value Steps
!style="background:#cccccc"|Fill color!!style="background:#cccccc"|Line value 5
|-
|N10
|style="background:#FFFFFF; color:#7A7A7A"|'''delta 5 value steps'''
|-
|N9
|style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N8
|style="background:#C8C8C8; color:#7A7A7A"|'''delta 3 value steps'''
|-
|N7
|style="background:#ADADAD; color:#7A7A7A"|'''delta 2 value steps'''
|-
|N6
|style="background:#939393; color:#7A7A7A"|'''delta 1 value steps'''
|-
|N5
|style="background:#7A7A7A; color:#7A7A7A"|'''delta 0 value steps'''
|-
|N4
|style="background:#616161; color:#7A7A7A"|'''delta 1 value steps'''
|-
|N3
|style="background:#494949; color:#7A7A7A"|'''delta 2 value steps'''
|-
|N2
|style="background:#343434; color:#7A7A7A"|'''delta 3 value steps'''
|-
|N1
|style="background:#222222; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N0
|style="background:#000000; color:#7A7A7A"|'''delta 5 value steps'''
|}
</font>
<!-- END -->
</td><td>
<!-- TRANSLATION -->
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Texto Sobre Valores Normales de la Laptop
!style="background:#cccccc"|Valor<BR>Tipografía!!style="background:#cccccc"|Marco (N2.5)!!style="background:#cccccc"|Fondo (N9)
|-
|N10||style="background:#414141; color:#FFFFFF"|'''pasos delta 7.5'''||style="background:#E4E4E4; color:#FFFFFF"|'''pasos delta 1'''
|-
|N9||style="background:#414141; color:#E4E4E4"|'''pasos delta 6.5'''||style="background:#E4E4E4; color:#E4E4E4"|'''pasos delta 0'''
|-
|N8||style="background:#414141; color:#C8C8C8"|'''pasos delta 5.5'''||style="background:#E4E4E4; color:#C8C8C8"|'''pasos delta 1'''
|-
|N7||style="background:#414141; color:#ADADAD"|'''pasos delta 4.5'''||style="background:#E4E4E4; color:#ADADAD"|'''pasos delta 2'''
|-
|N6||style="background:#414141; color:#939393"|'''pasos delta 3.5'''||style="background:#E4E4E4; color:#939393"|'''pasos delta 3'''
|-
|N5||style="background:#414141; color:#7A7A7A"|'''pasos delta 2.5'''||style="background:#E4E4E4; color:#7A7A7A"|'''pasos delta 4'''
|-
|N4||style="background:#414141; color:#616161"|'''pasos delta 1.5'''||style="background:#E4E4E4; color:#616161"|'''pasos delta 5'''
|-
|N3||style="background:#414141; color:#494949"|'''pasos delta 0.5'''||style="background:#E4E4E4; color:#494949"|'''pasos delta 6'''
|-
|N2||style="background:#414141; color:#343434"|'''pasos delta 0.5'''||style="background:#E4E4E4; color:#343434"|'''pasos delta 7'''
|-
|N1||style="background:#414141; color:#222222"|'''pasos delta 1.5'''||style="background:#E4E4E4; color:#222222"|'''pasos delta 8'''
|-
|N0||style="background:#414141; color:#000000"|'''pasos delta 2.5'''||style="background:#E4E4E4; color:#000000"|'''pasos delta 9'''
|}<!-- ORIGINAL -->
<font size="1">
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Text Against Default Laptop Colors
!style="background:#cccccc"|Font value!!style="background:#cccccc"|Frame (N2.5)!!style="background:#cccccc"|Background (N9)
|-
|N10||style="background:#414141; color:#FFFFFF"|'''delta 7.5 value steps'''||style="background:#E4E4E4; color:#FFFFFF"|'''delta 1 value step'''
|-
|N9||style="background:#414141; color:#E4E4E4"|'''delta 6.5 value steps'''||style="background:#E4E4E4; color:#E4E4E4"|'''delta 0 value steps'''
|-
|N8||style="background:#414141; color:#C8C8C8"|'''delta 5.5 value steps'''||style="background:#E4E4E4; color:#C8C8C8"|'''delta 1 value step'''
|-
|N7||style="background:#414141; color:#ADADAD"|'''delta 4.5 value steps'''||style="background:#E4E4E4; color:#ADADAD"|'''delta 2 value steps'''
|-
|N6||style="background:#414141; color:#939393"|'''delta 3.5 value steps'''||style="background:#E4E4E4; color:#939393"|'''delta 3 value steps'''
|-
|N5||style="background:#414141; color:#7A7A7A"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N4||style="background:#414141; color:#616161"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#616161"|'''delta 5 value steps'''
|-
|N3||style="background:#414141; color:#494949"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#494949"|'''delta 6 value steps'''
|-
|N2||style="background:#414141; color:#343434"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#343434"|'''delta 7 value steps'''
|-
|N1||style="background:#414141; color:#222222"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#222222"|'''delta 8 value steps'''
|-
|N0||style="background:#414141; color:#000000"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#000000"|'''delta 9 value steps'''
|}
</font>
<!-- END -->
</td>
</tr>
</table>
{{hig-subnav-intra-lang | lang=ko
| p_page=Icons
| c_section=The Sugar Interface | c_page=Colors
| n_page=Text and Fonts}}
{{OLPC}}
{{Translation | lang = ko | source = OLPC Human Interface Guidelines/The Sugar Interface/Colors | version = 18291 | source_display = OLPC-HIG-Colors}}
</noinclude>
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
{{hig-subnav-intra-lang | lang=ko
| p_page=Icons
| c_section=The Sugar Interface | c_page=Colors
| n_page=Text and Fonts}}
{{anchor|Colors}}
<!--=== Colores ===-->
=== {{:OLPC Human Interface Guidelines/The Sugar Interface/Colors/lang-ko/title}} ===
{{anchor|Imbuing Color with Meaning}}
====의미로 색깔을 고르기====
색깔에 대한 슈가의 접근법은 독특합니다: 메쉬 상에서 소통하는 ''사람들''을 표시하며, 활동이나 오브젝트가 아닙니다. 이중 컬러를 선택함으로써 아이들은 그들의 노트북과 그들의 참여를 표현합니다. 어느 한 아이의 모든 활동, 오브젝트, 그리고 코멘트는 그 아이 자신의 색깔로 표시되며, 다른 아이들의 노트북에 등장할 때도 마찬가지 입니다; 그 아이의 이름과 성격을 보완하는 시각적 정체성을 형성합니다.
{{ Translated text |
Sugar treats color differently than the typical UI: colors are used in the interface represent the ''individuals'' who are interacting within the mesh, not the activities or objects they are using. Children personalize their laptops and their presence on the mesh by selecting a dual-tone color scheme. All of the activities, objects, and comments belonging to a child take on her own colors—even when they appear on the laptops of other children on the mesh—forming a visual identity that supplements her name and attributes.
| display = block }}
이러한 컬러 처리는 활동 내에서도 마찬가지입니다. 더불어 웹 서피을 진행할 때, 한 아이가 게재한 웹 주소는 그 아이의 색깔로 표현됩니다. 흑백 모드인 경우, 색의 진하기를 조절함으로써 그와 같은 효과를 냅니다.
{{ Translated text |
This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link. Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. When the display runs in grayscale mode, this colored visual identity is less apparent. However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color.
| display = block }}
아이가 아니라 특정 활동에 속한 인터페이스 요소, 버튼, 그리고 기타 아이콘은 가능한 흑백으로 표현함으로써 전세 시스템의 일관성을 유지해 주십시오. 기존 사용자 인터페이스에서 비활성 아이콘을 나타내는 회색 처리는 슈가에 적용되지 않으므로, 주의해야 합니다. [[OLPC Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|비활성 아이콘]]을 참조하십시오.
{{ Translated text |
To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. While removing color as a primary visual clue may seem counter-intuitive, it does encourage the icon's form to clearly indicate its function. Since the laptops will also run in grayscale mode, clearly distinct shapes become essential in the absence of chroma information, and so limiting activity icons to grayscale by default ensures compatibility in both modes. Additionally, keep in mind that the traditional method of "graying-out" inactive buttons and controls simply will not function on the laptops and must be avoided. Instead, please adhere to the guidelines for [[OLPC Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|inactive icons]].
| display = block }}
{{anchor|Contrast in the Munsell Colorspace}}
====문셀 컬러스페이스에서 대조====
이 노트북의 기본적인 컬러 스킴은 컬러와 흑백모드 모두에서 작동해야 하는 제약이 있습니다. 이와같은 이유로, 우리는 적어도 두 가지 [[Munsell]] 밸류 스탭의 achromatic 대조를 위해 노력하고 있습니다.
{{ Translated text |
The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[Munsell]] value steps.
| display = block }}
{{ Translated text |
The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either ≤N3 or ≥N7.
| display = block }}
<table cellspacing='50' style='margin: 1em auto 1em auto'><tr><td>
<!-- TRANSLATION-->
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Pasos Munsell
!style="background:#cccccc"|Color<BR>Relleno!!style="background:#cccccc"|Line value 5
|-
|N10
|style="background:#FFFFFF; color:#7A7A7A"|'''pasos delta 5'''
|-
|N9
|style="background:#E4E4E4; color:#7A7A7A"|'''pasos delta 4'''
|-
|N8
|style="background:#C8C8C8; color:#7A7A7A"|'''pasos delta 3'''
|-
|N7
|style="background:#ADADAD; color:#7A7A7A"|'''pasos delta 2'''
|-
|N6
|style="background:#939393; color:#7A7A7A"|'''pasos delta 1'''
|-
|N5
|style="background:#7A7A7A; color:#7A7A7A"|'''pasos delta 0'''
|-
|N4
|style="background:#616161; color:#7A7A7A"|'''pasos delta 1'''
|-
|N3
|style="background:#494949; color:#7A7A7A"|'''pasos delta 2'''
|-
|N2
|style="background:#343434; color:#7A7A7A"|'''pasos delta 3'''
|-
|N1
|style="background:#222222; color:#7A7A7A"|'''pasos delta 4'''
|-
|N0
|style="background:#000000; color:#7A7A7A"|'''pasos delta 5'''
|}
<!-- ORIGINAL -->
<font size="1">
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Munsell Value Steps
!style="background:#cccccc"|Fill color!!style="background:#cccccc"|Line value 5
|-
|N10
|style="background:#FFFFFF; color:#7A7A7A"|'''delta 5 value steps'''
|-
|N9
|style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N8
|style="background:#C8C8C8; color:#7A7A7A"|'''delta 3 value steps'''
|-
|N7
|style="background:#ADADAD; color:#7A7A7A"|'''delta 2 value steps'''
|-
|N6
|style="background:#939393; color:#7A7A7A"|'''delta 1 value steps'''
|-
|N5
|style="background:#7A7A7A; color:#7A7A7A"|'''delta 0 value steps'''
|-
|N4
|style="background:#616161; color:#7A7A7A"|'''delta 1 value steps'''
|-
|N3
|style="background:#494949; color:#7A7A7A"|'''delta 2 value steps'''
|-
|N2
|style="background:#343434; color:#7A7A7A"|'''delta 3 value steps'''
|-
|N1
|style="background:#222222; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N0
|style="background:#000000; color:#7A7A7A"|'''delta 5 value steps'''
|}
</font>
<!-- END -->
</td><td>
<!-- TRANSLATION -->
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Texto Sobre Valores Normales de la Laptop
!style="background:#cccccc"|Valor<BR>Tipografía!!style="background:#cccccc"|Marco (N2.5)!!style="background:#cccccc"|Fondo (N9)
|-
|N10||style="background:#414141; color:#FFFFFF"|'''pasos delta 7.5'''||style="background:#E4E4E4; color:#FFFFFF"|'''pasos delta 1'''
|-
|N9||style="background:#414141; color:#E4E4E4"|'''pasos delta 6.5'''||style="background:#E4E4E4; color:#E4E4E4"|'''pasos delta 0'''
|-
|N8||style="background:#414141; color:#C8C8C8"|'''pasos delta 5.5'''||style="background:#E4E4E4; color:#C8C8C8"|'''pasos delta 1'''
|-
|N7||style="background:#414141; color:#ADADAD"|'''pasos delta 4.5'''||style="background:#E4E4E4; color:#ADADAD"|'''pasos delta 2'''
|-
|N6||style="background:#414141; color:#939393"|'''pasos delta 3.5'''||style="background:#E4E4E4; color:#939393"|'''pasos delta 3'''
|-
|N5||style="background:#414141; color:#7A7A7A"|'''pasos delta 2.5'''||style="background:#E4E4E4; color:#7A7A7A"|'''pasos delta 4'''
|-
|N4||style="background:#414141; color:#616161"|'''pasos delta 1.5'''||style="background:#E4E4E4; color:#616161"|'''pasos delta 5'''
|-
|N3||style="background:#414141; color:#494949"|'''pasos delta 0.5'''||style="background:#E4E4E4; color:#494949"|'''pasos delta 6'''
|-
|N2||style="background:#414141; color:#343434"|'''pasos delta 0.5'''||style="background:#E4E4E4; color:#343434"|'''pasos delta 7'''
|-
|N1||style="background:#414141; color:#222222"|'''pasos delta 1.5'''||style="background:#E4E4E4; color:#222222"|'''pasos delta 8'''
|-
|N0||style="background:#414141; color:#000000"|'''pasos delta 2.5'''||style="background:#E4E4E4; color:#000000"|'''pasos delta 9'''
|}<!-- ORIGINAL -->
<font size="1">
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Text Against Default Laptop Colors
!style="background:#cccccc"|Font value!!style="background:#cccccc"|Frame (N2.5)!!style="background:#cccccc"|Background (N9)
|-
|N10||style="background:#414141; color:#FFFFFF"|'''delta 7.5 value steps'''||style="background:#E4E4E4; color:#FFFFFF"|'''delta 1 value step'''
|-
|N9||style="background:#414141; color:#E4E4E4"|'''delta 6.5 value steps'''||style="background:#E4E4E4; color:#E4E4E4"|'''delta 0 value steps'''
|-
|N8||style="background:#414141; color:#C8C8C8"|'''delta 5.5 value steps'''||style="background:#E4E4E4; color:#C8C8C8"|'''delta 1 value step'''
|-
|N7||style="background:#414141; color:#ADADAD"|'''delta 4.5 value steps'''||style="background:#E4E4E4; color:#ADADAD"|'''delta 2 value steps'''
|-
|N6||style="background:#414141; color:#939393"|'''delta 3.5 value steps'''||style="background:#E4E4E4; color:#939393"|'''delta 3 value steps'''
|-
|N5||style="background:#414141; color:#7A7A7A"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N4||style="background:#414141; color:#616161"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#616161"|'''delta 5 value steps'''
|-
|N3||style="background:#414141; color:#494949"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#494949"|'''delta 6 value steps'''
|-
|N2||style="background:#414141; color:#343434"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#343434"|'''delta 7 value steps'''
|-
|N1||style="background:#414141; color:#222222"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#222222"|'''delta 8 value steps'''
|-
|N0||style="background:#414141; color:#000000"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#000000"|'''delta 9 value steps'''
|}
</font>
<!-- END -->
</td>
</tr>
</table>
{{hig-subnav-intra-lang | lang=ko
| p_page=Icons
| c_section=The Sugar Interface | c_page=Colors
| n_page=Text and Fonts}}