diff --git a/src/main/haxework/color/ColorUtil.hx b/src/main/haxework/color/ColorUtil.hx
index 02db37f..c8fbf4d 100644
--- a/src/main/haxework/color/ColorUtil.hx
+++ b/src/main/haxework/color/ColorUtil.hx
@@ -23,4 +23,14 @@ class ColorUtil {
             floor(color.blue + d),
         ];
     }
+
+    public static function grey(color:Color):Color {
+        var m = (color.red + color.green + color.blue) / 3;
+        return [
+            color.alpha,
+            floor(m),
+            floor(m),
+            floor(m),
+        ];
+    }
 }
diff --git a/src/main/haxework/view/skin/ButtonColorSkin.hx b/src/main/haxework/view/skin/ButtonColorSkin.hx
index 065aae8..f009cba 100644
--- a/src/main/haxework/view/skin/ButtonColorSkin.hx
+++ b/src/main/haxework/view/skin/ButtonColorSkin.hx
@@ -9,39 +9,39 @@ import haxework.view.ButtonView;
 
 class ButtonColorSkin implements ISkin<ButtonView> {
 
-    public var color(default, set):Int;
-    public var alpha(default, default):Float;
+    public var color(default, default):Int;
+    public var borderColor(default, default):Int;
     public var round(default, default):Float;
     private var colors:Map<ButtonState, Int>;
 
-    public function new(color:Int = 0xffffff, alpha:Float = 1.0, round:Float = 15) {
+    public function new(color:Int = 0xffffff, borderColor:Int = -1, round:Float = 15) {
         this.color = color;
-        this.alpha = alpha;
+        this.borderColor = borderColor;
         this.round = round;
     }
 
-    private function set_color(value:Int):Int {
-        colors = new Map<ButtonState, Int>();
-        colors.set(UP, value);
-        colors.set(DOWN, ColorUtil.diff(value, -24));
-        colors.set(OVER, ColorUtil.diff(value, 24));
-        colors.set(OVER, ColorUtil.diff(value, 24));
-        colors.set(DISABLED, ColorUtil.multiply(value, 0.6));
-        return value;
-    }
-
     public function draw(view:ButtonView):Void {
-        var color:Int = colors.get(view.state);
+        var color:Int = stateColor(color, view.state);
+        var borderColor:Int  = borderColor > -1 ? borderColor : ColorUtil.multiply(color, 1.5);
         if (Std.is(view, ToggleButtonView)) {
             if (!cast(view, ToggleButtonView).on) {
                 color = ColorUtil.multiply(color, 0.5);
             }
         }
         var graphics:Graphics = view.content.graphics;
-        graphics.beginFill(color, alpha);
-        graphics.lineStyle(2, ColorUtil.multiply(color, 1.5), 1, true, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND);
+        graphics.beginFill(color, 1.0);
+        graphics.lineStyle(2, borderColor, 1, true, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND);
         graphics.drawRoundRect(1, 1, view.width - 2, view.height - 2, round, round);
         graphics.lineStyle();
         graphics.endFill();
     }
+
+    private static function stateColor(color:Int, state:ButtonState):Int {
+        return switch state {
+            case UP: color;
+            case DOWN: ColorUtil.diff(color, -24);
+            case OVER: ColorUtil.diff(color, 24);
+            case DISABLED: ColorUtil.multiply(color, 0.6);
+        }
+    }
 }
diff --git a/src/main/haxework/view/skin/Skin.hx b/src/main/haxework/view/skin/Skin.hx
index 0714a06..80b95d8 100644
--- a/src/main/haxework/view/skin/Skin.hx
+++ b/src/main/haxework/view/skin/Skin.hx
@@ -27,16 +27,16 @@ class Skin {
         return new TextSkin(fontColor, fontSize, fontFamily, fontEmbed);
     }
 
-    public static function buttonColor(color:Int, alpha:Float = 1.0):ISkin<ButtonView> {
-        return new ButtonColorSkin(color, alpha);
+    public static function buttonColor(color:Int, borderColor:Int = -1):ISkin<ButtonView> {
+        return new ButtonColorSkin(color, borderColor);
     }
 
     public static function buttonBitmap(image:BitmapData, fillType:FillType = null):ISkin<ButtonView> {
         return new ButtonBitmapSkin(image, fillType);
     }
 
-    public static function tabColor(color:Int, alpha:Float = 1.0):ISkin<ButtonView> {
-        return new TabColorSkin(color, alpha);
+    public static function tabColor(color:Int):ISkin<ButtonView> {
+        return new TabColorSkin(color);
     }
 
     public static function scrollHorizontal(foreColor:Int, backColor:Int) {
diff --git a/src/main/haxework/view/skin/TabColorSkin.hx b/src/main/haxework/view/skin/TabColorSkin.hx
index 41eeb48..cac437e 100644
--- a/src/main/haxework/view/skin/TabColorSkin.hx
+++ b/src/main/haxework/view/skin/TabColorSkin.hx
@@ -6,14 +6,14 @@ import haxework.color.ColorUtil;
 class TabColorSkin extends ButtonColorSkin {
 
     override public function draw(view:ButtonView):Void {
-        var color:Int = colors.get(view.state);
+        var color:Int = ButtonColorSkin.stateColor(color, view.state);
         if (Std.is(view, ToggleButtonView)) {
             if (!cast(view, ToggleButtonView).on) {
                 color = ColorUtil.multiply(color, 0.5);
             }
         }
         var graphics:Graphics = view.content.graphics;
-        graphics.beginFill(color, alpha);
+        graphics.beginFill(color, 1.0);
         graphics.lineStyle(2, ColorUtil.multiply(color, 1.5));
         graphics.drawRoundRectComplex(1, 1, view.width - 2, view.height - 2, 5, 5, 0, 0);
     }